# Navbar

> A horizontal top-of-page bar with a brand mark, navigation links, and actions on the right.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Navigation
- Tags: nav, header, top-bar, links, sticky
- Docs: https://fancy-ui.rama.app/docs/components/navbar
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/navbar

## Import

```svelte
<script lang="ts">
  import { Navbar } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Navbar } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `"Main"` | Accessible name for the nav landmark. |
| `sticky` | `boolean` | `false` | Pins the bar to the top with `position: sticky` and a translucent, blurred background. |
| `bordered` | `boolean` | `true` | Draws a 1px hairline along the bottom edge. |
| `class` | `string` | — | Additional CSS classes, merged onto the root. |
| `ref` | `HTMLElement \| null` | `null` | Bindable reference to the root nav element. |
| `NavbarLink.href` (required) | `string` | — | Destination URL. |
| `NavbarLink.current` | `boolean` | `false` | Marks this as the current page — aria-current="page" plus a visible weight/colour change. |
| `NavbarLink.external` | `boolean` | `false` | Opens in a new tab with a safe rel, and notes it for assistive tech. |
| `NavbarLink.disabled` | `boolean` | `false` | Strips the link out of the click and keyboard-activation paths. |
| `NavbarLink.onclick` | `(event: MouseEvent) => void` | — | Native click handler. Never called while disabled. |
| `NavbarLink.class` | `string` | — | Additional CSS classes, merged onto the anchor. |
| `NavbarLink.ref` | `HTMLAnchorElement \| null` | `null` | Bindable reference to the anchor element. |
| `NavbarLink.sound` | `boolean` | `false` | Plays select when a navbar link that is not already current is activated, once the user has enabled sound |

## Snippets

| Snippet | Description |
| --- | --- |
| `brand` | The brand mark / wordmark, on the left. |
| `children` | The navigation links, between the brand and the actions. |
| `actions` | Actions on the right — search, sign-in, a theme switch. |
| `NavbarLink.children` | The link's label. |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { Navbar, NavbarLink } from "fancy-ui-svelte";

	let current = $state("docs");
</script>

<Navbar>
	{#snippet brand()}
		<span
			class="h-2 w-2 rounded-sm bg-gradient-to-br from-purple-500 to-cyan-400"
			aria-hidden="true"
		></span>
		FancyUI
	{/snippet}

	<NavbarLink sound href="#docs" current={current === "docs"} onclick={() => (current = "docs")}>
		Docs
	</NavbarLink>
	<NavbarLink
		sound
		href="#components"
		current={current === "components"}
		onclick={() => (current = "components")}
	>
		Components
	</NavbarLink>
	<NavbarLink
		sound
		href="#showcase"
		current={current === "showcase"}
		onclick={() => (current = "showcase")}
	>
		Showcase
	</NavbarLink>
</Navbar>
```

### With Actions

Search and a sign-in button on the right.

```svelte
<script lang="ts">
	import { Navbar, NavbarLink } from "fancy-ui-svelte";
	import { Button } from "fancy-ui-svelte";
</script>

<Navbar>
	{#snippet brand()}
		<span
			class="h-2 w-2 rounded-sm bg-gradient-to-br from-purple-500 to-cyan-400"
			aria-hidden="true"
		></span>
		FancyUI
	{/snippet}

	<NavbarLink sound href="#docs" current>Docs</NavbarLink>
	<NavbarLink sound href="#components">Components</NavbarLink>
	<NavbarLink sound href="#showcase">Showcase</NavbarLink>

	{#snippet actions()}
		<button
			type="button"
			aria-label="Search"
			class="text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-[4px] p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
		>
			<svg
				class="size-4"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				stroke-linecap="round"
				stroke-linejoin="round"
				aria-hidden="true"
			>
				<circle cx="11" cy="11" r="7" />
				<line x1="21" y1="21" x2="16.65" y2="16.65" />
			</svg>
		</button>
		<Button size="sm">Sign in</Button>
	{/snippet}
</Navbar>
```

### Sticky Bar

Pinned to the top of a scrolling container with a blurred background.

```svelte
<script lang="ts">
	import { Navbar, NavbarLink } from "fancy-ui-svelte";

	const paragraphs = Array.from({ length: 8 }, (_, i) => i);
</script>

<!--
	A fixed-height, scrollable wrapper so the sticky behaviour is visible
	inside the docs preview — in a real app `sticky` pins to the nearest
	scrolling ancestor, typically the page itself.
-->
<div class="border-border h-72 overflow-y-auto rounded-lg border">
	<Navbar sticky>
		{#snippet brand()}
			<span
				class="h-2 w-2 rounded-sm bg-gradient-to-br from-purple-500 to-cyan-400"
				aria-hidden="true"
			></span>
			FancyUI
		{/snippet}

		<NavbarLink sound href="#docs" current>Docs</NavbarLink>
		<NavbarLink sound href="#components">Components</NavbarLink>
		<NavbarLink sound href="#showcase">Showcase</NavbarLink>
	</Navbar>

	<div class="text-muted-foreground space-y-3 p-5 text-sm">
		{#each paragraphs as i (i)}
			<p>
				Scroll to see the bar stay pinned to the top of this container with a blurred, translucent
				background — paragraph {i + 1}.
			</p>
		{/each}
	</div>
</div>
```