Navigation Core Stable
Navbar
A horizontal top-of-page bar with a brand mark, navigation links, and actions on the right.
Preview
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 href="#docs" current={current === "docs"} onclick={() => (current = "docs")}>
Docs
</NavbarLink>
<NavbarLink
href="#components"
current={current === "components"}
onclick={() => (current = "components")}
>
Components
</NavbarLink>
<NavbarLink
href="#showcase"
current={current === "showcase"}
onclick={() => (current = "showcase")}
>
Showcase
</NavbarLink>
</Navbar>Installation
pnpm add fancy-ui-svelte
import { Navbar } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { Navbar } from 'fancy-ui-svelte';
</script>
<Navbar />Examples
Basic Usage
svelte
<script lang="ts">
import { Navbar, NavbarLink } from "$lib/fancy-ui/navbar";
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 href="#docs" current={current === "docs"} onclick={() => (current = "docs")}>
Docs
</NavbarLink>
<NavbarLink
href="#components"
current={current === "components"}
onclick={() => (current = "components")}
>
Components
</NavbarLink>
<NavbarLink
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 "$lib/fancy-ui/navbar";
import { Button } from "$lib/fancy-ui/button";
</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 href="#docs" current>Docs</NavbarLink>
<NavbarLink href="#components">Components</NavbarLink>
<NavbarLink 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 "$lib/fancy-ui/navbar";
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 href="#docs" current>Docs</NavbarLink>
<NavbarLink href="#components">Components</NavbarLink>
<NavbarLink 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>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 * | 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. |
Slots
| Slot | 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. |
Links
Related components
Br
Breadcrumb
A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech.
Navigation Stable
Co
CommandMenu
A modal search palette over a flat vocabulary of items — grouped results, diacritic-insensitive filtering, match highlighting, and full keyboard navigation with focus that never leaves the search field.
Navigation Stable
Co
ContextMenu
A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigger element.
Navigation Stable