This is the llms.txt documentation for the "navbars" directory of the Origin UI - Svelte project. # "navbars" directory > A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications. This documentation covers 20 components, each following best practices for accessibility, performance, and type safety. ## Components ## navbar-01 > A type-safe, accessible navbar-01 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-01` - **Location**: `/src/lib/components/navbars/navbar-01.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link (link.label)} {link.label} {/each}
{#each navigationLinks as link (link.label)} {link.label} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-01.svelte) ## navbar-02 > A type-safe, accessible navbar-02 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-02` - **Location**: `/src/lib/components/navbars/navbar-02.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link, index (link.label)} {#if link.submenu}
{link.label}
    {#each link.items as item (item.label)}
  • {item.label}
    • {/each}
{:else} {link.label} {/if} {#if index < navigationLinks.length - 1} {#if (!link.submenu && navigationLinks[index + 1].submenu) || (link.submenu && !navigationLinks[index + 1].submenu) || (link.submenu && navigationLinks[index + 1].submenu && link.type !== navigationLinks[index + 1].type)}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-02.svelte) ## navbar-03 > A type-safe, accessible navbar-03 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-03` - **Location**: `/src/lib/components/navbars/navbar-03.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link (link.label)} {link.label} {/each}
{#each navigationLinks as link (link.label)} {link.label} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-03.svelte) ## navbar-04 > A type-safe, accessible navbar-04 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-04` - **Location**: `/src/lib/components/navbars/navbar-04.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link (link.label)} {link.label} {/each} Sign In
{#each navigationLinks as link (link.label)} {link.label} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-04.svelte) ## navbar-05 > A type-safe, accessible navbar-05 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-05` - **Location**: `/src/lib/components/navbars/navbar-05.svelte` - **Type**: UI Component ### Usage ```svelte Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link (link.label)} {link.label} {/each}
{#each navigationLinks as link (link.label)} {link.label} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-05.svelte) ## navbar-06 > A type-safe, accessible navbar-06 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-06` - **Location**: `/src/lib/components/navbars/navbar-06.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link (link.label)} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-06.svelte) ## navbar-07 > A type-safe, accessible navbar-07 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-07` - **Location**: `/src/lib/components/navbars/navbar-07.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) - [`bits-ui`](https://github.com/huntabyte/bits-ui) Full component implementation: ```svelte
/ Toggle menu {#snippet child({ props })} Personal Account {/snippet} {#snippet child({ props })} Projects {/snippet} Personal Account / Projects /
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-07.svelte) ## navbar-08 > A type-safe, accessible navbar-08 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-08` - **Location**: `/src/lib/components/navbars/navbar-08.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link (link.label)} {link.label} {/each}
⌘K
{#each navigationLinks as link (link.label)} {link.label} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-08.svelte) ## navbar-09 > A type-safe, accessible navbar-09 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-09` - **Location**: `/src/lib/components/navbars/navbar-09.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link (link.label)} {/each}
{#each navigationLinks as link (link.label)} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-09.svelte) ## navbar-10 > A type-safe, accessible navbar-10 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-10` - **Location**: `/src/lib/components/navbars/navbar-10.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-10.svelte) ## navbar-11 > A type-safe, accessible navbar-11 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-11` - **Location**: `/src/lib/components/navbars/navbar-11.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link (link.label)} {/each}
{#each navigationLinks as link (link.label)} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-11.svelte) ## navbar-12 > A type-safe, accessible navbar-12 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-12` - **Location**: `/src/lib/components/navbars/navbar-12.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link (link.label)} {/each} {#each navigationLinks as link (link.label)} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-12.svelte) ## navbar-13 > A type-safe, accessible navbar-13 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-13` - **Location**: `/src/lib/components/navbars/navbar-13.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) - [`bits-ui`](https://github.com/huntabyte/bits-ui) Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link (link.label)} {link.label} {/each} /
{#each navigationLinks as link (link.label)} {link.label} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-13.svelte) ## navbar-14 > A type-safe, accessible navbar-14 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-14` - **Location**: `/src/lib/components/navbars/navbar-14.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link (link.label)} {/each}
{#each navigationLinks as link (link.label)} {/each}
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-14.svelte) ## navbar-15 > A type-safe, accessible navbar-15 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-15` - **Location**: `/src/lib/components/navbars/navbar-15.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-15.svelte) ## navbar-16 > A type-safe, accessible navbar-16 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-16` - **Location**: `/src/lib/components/navbars/navbar-16.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
(checked = value)} class="h-5 w-8 [&_span]:size-4 data-[state=checked]:[&_span]:translate-x-3 data-[state=checked]:[&_span]:rtl:-translate-x-3" aria-label="Toggle switch" />
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-16.svelte) ## navbar-17 > A type-safe, accessible navbar-17 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-17.todo` - **Location**: `/src/lib/components/navbars/navbar-17.todo.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
Reports
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-17.todo.svelte) ## navbar-18 > A type-safe, accessible navbar-18 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-18` - **Location**: `/src/lib/components/navbars/navbar-18.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-18.svelte) ## navbar-19 > A type-safe, accessible navbar-19 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-19` - **Location**: `/src/lib/components/navbars/navbar-19.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte

Basic UI

KK Online
KK Online
KK Online
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-19.svelte) ## navbar-20 > A type-safe, accessible navbar-20 component for building modern UIs. This component is part of the navbars collection. ### Core Information - **Component ID**: `navbar-20` - **Location**: `/src/lib/components/navbars/navbar-20.svelte` - **Type**: UI Component ### Usage ```svelte ### Dependencies Required packages and components: - [`@lucide/svelte`](https://github.com/lucide-icons/lucide) Full component implementation: ```svelte
{#snippet child({ props })} {/snippet} {#each navigationLinks as link (link.label)} {link.label} {/each}
{#each navigationLinks as link (link.label)} {link.label} {/each}
Online
(checked = value)} class="peer absolute inset-0 h-[inherit] w-auto data-[state=unchecked]:bg-input/50 [&_span]:z-10 [&_span]:h-full [&_span]:w-1/2 [&_span]:transition-transform [&_span]:duration-300 [&_span]:[transition-timing-function:cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-full [&_span]:data-[state=checked]:rtl:-translate-x-full" />
``` ### Links - [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/navbars/navbar-20.svelte)