Navbar

The Navbar composes a brand, a navigation menu (NavbarMenu), and actions into a top bar with four behaviors — scroll, sticky, shrink, and hide — collapsing to a mobile disclosure below md. An optional floating flag turns it into a floating pill. It is based on shadcnblocks Navbar 7 and Navbar 6, re-based on Ark UI’s navigation-menu and collapsible primitives, sharing the navbarVariants cva + part classes from @cloudvoyant/helical-ui. Use the framework selector in the top-right to switch between implementations.

// apps/docs/src/components/examples/navbar/sticky/react.tsx
import {
  Navbar,
  NavbarProvider,
  NavbarBrand,
  NavbarMenu,
  NavbarActions,
  NavbarTrigger,
  NavbarMobileOverlay,
  Container,
  VStack,
  NavbarMenuList,
  NavbarMenuItem,
  NavbarMenuTrigger,
  NavbarMenuContent,
  NavbarMenuLink,
  NavbarMobileMenu,
  NavbarMobileMenuTrigger,
  NavbarMobileMenuContent,
} from '@cloudvoyant/helical-react';
import { HelicalLogo } from '../../HelicalLogo';

const CONTENT = [
  ['About', 'A brief history of helical-ui and its guiding principles.'],
  ['Installation', 'Add helical-ui to your Astro, Vite, or framework project.'],
  ['Components', 'Every component, demoed and documented for React and Svelte.'],
  ['Theming', 'Light and dark themes over the shadcn token model.'],
  ['Accessibility', "Roles, focus, and keyboard behavior come from Ark's state machine."],
  ['Roadmap', 'What is coming next — from drawers to tours.'],
];

export default function ReactNavbarSticky() {
  return (
    <div className="relative h-[420px] overflow-y-auto overscroll-y-contain rounded-md bg-background">
      <NavbarProvider>
        <Navbar className="z-30">
          <NavbarBrand>
            <HelicalLogo className="h-7 w-auto" />
            <span className="text-sm font-semibold">helical-ui</span>
          </NavbarBrand>
          <NavbarMenu placement="center">
            <NavbarMenuList>
              <NavbarMenuItem value="docs" variant="link">
                <NavbarMenuTrigger>Docs</NavbarMenuTrigger>
                <NavbarMenuContent>
                  <NavbarMenuLink href="#">Components</NavbarMenuLink>
                  <NavbarMenuLink href="#">Theming</NavbarMenuLink>
                </NavbarMenuContent>
              </NavbarMenuItem>
              <NavbarMenuItem value="blog" variant="link">
                <NavbarMenuLink href="#">Blog</NavbarMenuLink>
              </NavbarMenuItem>
            </NavbarMenuList>
          </NavbarMenu>
          <NavbarActions>
            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground">
              Sign in
            </a>
          </NavbarActions>
          <NavbarTrigger />
          <NavbarMobileOverlay>
            <NavbarMobileMenu>
              <NavbarMobileMenuTrigger>Docs</NavbarMobileMenuTrigger>
              <NavbarMobileMenuContent>
                <a
                  href="#"
                  className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                >
                  Components
                </a>
                <a
                  href="#"
                  className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                >
                  Theming
                </a>
              </NavbarMobileMenuContent>
            </NavbarMobileMenu>
            <a
              href="#"
              className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
            >
              Blog
            </a>
          </NavbarMobileOverlay>
        </Navbar>
        <Container className="py-6">
          <VStack className="gap-4">
            {CONTENT.map(([title, body]) => (
              <div key={title} className="rounded-md border border-border p-4">
                <p className="text-sm font-medium">{title}</p>
                <p className="mt-1 text-sm text-muted-foreground">{body}</p>
              </div>
            ))}
          </VStack>
        </Container>
      </NavbarProvider>
    </div>
  );
}

<!-- apps/docs/src/components/examples/navbar/sticky/svelte.svelte -->
<script lang="ts">
  import {
    Navbar,
    NavbarProvider,
    NavbarBrand,
    NavbarMenu,
    NavbarActions,
    NavbarTrigger,
    NavbarMobileOverlay,
    Container,
    VStack,
    NavbarMenuList,
    NavbarMenuItem,
    NavbarMenuTrigger,
    NavbarMenuContent,
    NavbarMenuLink,
    NavbarMobileMenu,
    NavbarMobileMenuTrigger,
    NavbarMobileMenuContent,
  } from '@cloudvoyant/helical-svelte';
  import HelicalLogo from '../../HelicalLogo.svelte';

  const CONTENT: [string, string][] = [
    ['About', 'A brief history of helical-ui and its guiding principles.'],
    ['Installation', 'Add helical-ui to your Astro, Vite, or framework project.'],
    ['Components', 'Every component, demoed and documented for React and Svelte.'],
    ['Theming', 'Light and dark themes over the shadcn token model.'],
    ['Accessibility', "Roles, focus, and keyboard behavior come from Ark's state machine."],
    ['Roadmap', 'What is coming next — from drawers to tours.'],
  ];
</script>

<div class="relative h-[420px] overflow-y-auto overscroll-y-contain rounded-md bg-background">
  <NavbarProvider>
    <Navbar class="z-30">
        <NavbarBrand>
          <HelicalLogo class="h-7 w-auto" /><span class="text-sm font-semibold">helical-ui</span>
        </NavbarBrand>
        <NavbarMenu placement="center">
          <NavbarMenuList>
            <NavbarMenuItem value="docs" variant="link">
              <NavbarMenuTrigger>Docs</NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="#">Components</NavbarMenuLink>
                <NavbarMenuLink href="#">Theming</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenuItem>
            <NavbarMenuItem value="blog" variant="link">
              <NavbarMenuLink href="#">Blog</NavbarMenuLink>
            </NavbarMenuItem>
          </NavbarMenuList>
        </NavbarMenu>
        <NavbarActions>
          <a href="#" class="text-sm font-medium text-muted-foreground hover:text-foreground">Sign in</a>
        </NavbarActions>
        <NavbarTrigger />
      <NavbarMobileOverlay>
        <NavbarMobileMenu>
          <NavbarMobileMenuTrigger>Docs</NavbarMobileMenuTrigger>
          <NavbarMobileMenuContent>
            <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Components</a>
            <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Theming</a>
          </NavbarMobileMenuContent>
        </NavbarMobileMenu>
        <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Blog</a>
      </NavbarMobileOverlay>
    </Navbar>
    <Container class="py-6">
      <VStack class="gap-4">
        {#each CONTENT as [title, body] (title)}
          <div class="rounded-md border border-border p-4">
            <p class="text-sm font-medium">{title}</p>
            <p class="mt-1 text-sm text-muted-foreground">{body}</p>
          </div>
        {/each}
      </VStack>
    </Container>
  </NavbarProvider>
</div>

Examples

Density

// apps/docs/src/components/examples/navbar/density/react.tsx
import {
  Navbar,
  NavbarProvider,
  NavbarMenu,
  NavbarMenuList,
  NavbarMenuItem,
  NavbarMenuTrigger,
  NavbarMenuContent,
  NavbarMenuLink,
} from '@cloudvoyant/helical-react';

export default function ReactNavbarMenuDensity() {
  return (
    <NavbarProvider>
      <Navbar variant="scroll" density="compact">
        <NavbarMenu>
          <NavbarMenuList>
            <NavbarMenuItem value="getting-started">
              <NavbarMenuTrigger>Getting Started</NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="#">Installation</NavbarMenuLink>
                <NavbarMenuLink href="#">Components</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenuItem>
            <NavbarMenuItem value="docs">
              <NavbarMenuLink href="#">Docs</NavbarMenuLink>
            </NavbarMenuItem>
          </NavbarMenuList>
        </NavbarMenu>
      </Navbar>
    </NavbarProvider>
  );
}

<!-- apps/docs/src/components/examples/navbar/density/svelte.svelte -->
<script lang="ts">
  import {
    Navbar,
    NavbarProvider,
    NavbarMenu,
    NavbarMenuList,
    NavbarMenuItem,
    NavbarMenuTrigger,
    NavbarMenuContent,
    NavbarMenuLink,
  } from '@cloudvoyant/helical-svelte';
</script>

<NavbarProvider>
  <Navbar variant="scroll" density="compact">
    <NavbarMenu>
      <NavbarMenuList>
        <NavbarMenuItem value="getting-started">
          <NavbarMenuTrigger>Getting Started</NavbarMenuTrigger>
          <NavbarMenuContent>
            <NavbarMenuLink href="#">Installation</NavbarMenuLink>
            <NavbarMenuLink href="#">Components</NavbarMenuLink>
          </NavbarMenuContent>
        </NavbarMenuItem>
        <NavbarMenuItem value="docs">
          <NavbarMenuLink href="#">Docs</NavbarMenuLink>
        </NavbarMenuItem>
      </NavbarMenuList>
    </NavbarMenu>
  </Navbar>
</NavbarProvider>

Dropdown

// apps/docs/src/components/examples/navbar/dropdown/react.tsx
import {
  Navbar,
  NavbarProvider,
  NavbarMenu,
  NavbarMenuList,
  NavbarMenuItem,
  NavbarMenuTrigger,
  NavbarMenuContent,
  NavbarMenuLink,
} from '@cloudvoyant/helical-react';

export default function ReactNavbarMenuDropdown() {
  return (
    <NavbarProvider>
      <Navbar variant="scroll">
        <NavbarMenu>
          <NavbarMenuList>
            <NavbarMenuItem value="platform">
              <NavbarMenuTrigger>Platform</NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="#">Analytics</NavbarMenuLink>
                <NavbarMenuLink href="#">Integrations</NavbarMenuLink>
                <NavbarMenuLink href="#">Automations</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenuItem>
            <NavbarMenuItem value="company">
              <NavbarMenuTrigger>Company</NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="#">About</NavbarMenuLink>
                <NavbarMenuLink href="#">Careers</NavbarMenuLink>
                <NavbarMenuLink href="#">Contact</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenuItem>
          </NavbarMenuList>
        </NavbarMenu>
      </Navbar>
    </NavbarProvider>
  );
}

<!-- apps/docs/src/components/examples/navbar/dropdown/svelte.svelte -->
<script lang="ts">
  import {
    Navbar,
    NavbarProvider,
    NavbarMenu,
    NavbarMenuList,
    NavbarMenuItem,
    NavbarMenuTrigger,
    NavbarMenuContent,
    NavbarMenuLink,
  } from '@cloudvoyant/helical-svelte';
</script>

<NavbarProvider>
  <Navbar variant="scroll">
    <NavbarMenu>
      <NavbarMenuList>
        <NavbarMenuItem value="platform">
          <NavbarMenuTrigger>Platform</NavbarMenuTrigger>
          <NavbarMenuContent>
            <NavbarMenuLink href="#">Analytics</NavbarMenuLink>
            <NavbarMenuLink href="#">Integrations</NavbarMenuLink>
            <NavbarMenuLink href="#">Automations</NavbarMenuLink>
          </NavbarMenuContent>
        </NavbarMenuItem>
        <NavbarMenuItem value="company">
          <NavbarMenuTrigger>Company</NavbarMenuTrigger>
          <NavbarMenuContent>
            <NavbarMenuLink href="#">About</NavbarMenuLink>
            <NavbarMenuLink href="#">Careers</NavbarMenuLink>
            <NavbarMenuLink href="#">Contact</NavbarMenuLink>
          </NavbarMenuContent>
        </NavbarMenuItem>
      </NavbarMenuList>
    </NavbarMenu>
  </Navbar>
</NavbarProvider>

Floating

// apps/docs/src/components/examples/navbar/floating/react.tsx
import {
  Navbar,
  NavbarProvider,
  NavbarBrand,
  NavbarMenu,
  NavbarTrigger,
  NavbarMobileOverlay,
  Container,
  VStack,
  NavbarMenuList,
  NavbarMenuItem,
  NavbarMenuTrigger,
  NavbarMenuContent,
  NavbarMenuLink,
  NavbarMobileMenu,
  NavbarMobileMenuTrigger,
  NavbarMobileMenuContent,
} from '@cloudvoyant/helical-react';
import { HelicalLogo } from '../../HelicalLogo';

const CONTENT = [
  ['About', 'A brief history of helical-ui and its guiding principles.'],
  ['Installation', 'Add helical-ui to your Astro, Vite, or framework project.'],
  ['Components', 'Every component, demoed and documented for React and Svelte.'],
  ['Theming', 'Light and dark themes over the shadcn token model.'],
  ['Accessibility', "Roles, focus, and keyboard behavior come from Ark's state machine."],
  ['Roadmap', 'What is coming next — from drawers to tours.'],
];

export default function ReactNavbarFloating() {
  return (
    <div className="relative h-[420px] overflow-y-auto overscroll-y-contain rounded-md bg-background">
      <NavbarProvider>
        <Navbar variant="shrink" floating className="sticky top-4 z-30">
          <NavbarBrand>
            <HelicalLogo className="h-7 w-auto" />
            <span className="text-sm font-semibold">helical-ui</span>
          </NavbarBrand>
          <NavbarMenu placement="left">
            <NavbarMenuList>
              <NavbarMenuItem value="docs" variant="link">
                <NavbarMenuTrigger>Docs</NavbarMenuTrigger>
                <NavbarMenuContent>
                  <NavbarMenuLink href="#">Components</NavbarMenuLink>
                  <NavbarMenuLink href="#">Theming</NavbarMenuLink>
                </NavbarMenuContent>
              </NavbarMenuItem>
              <NavbarMenuItem value="blog" variant="link">
                <NavbarMenuLink href="#">Blog</NavbarMenuLink>
              </NavbarMenuItem>
              <NavbarMenuItem value="signin" variant="link">
                <NavbarMenuLink href="#">Sign in</NavbarMenuLink>
              </NavbarMenuItem>
            </NavbarMenuList>
          </NavbarMenu>
          <NavbarTrigger />
          <NavbarMobileOverlay>
            <NavbarMobileMenu>
              <NavbarMobileMenuTrigger>Docs</NavbarMobileMenuTrigger>
              <NavbarMobileMenuContent>
                <a
                  href="#"
                  className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                >
                  Components
                </a>
                <a
                  href="#"
                  className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                >
                  Theming
                </a>
              </NavbarMobileMenuContent>
            </NavbarMobileMenu>
            <a
              href="#"
              className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
            >
              Blog
            </a>
            <a
              href="#"
              className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
            >
              Sign in
            </a>
          </NavbarMobileOverlay>
        </Navbar>
        <Container className="py-6 pt-20">
          <VStack className="gap-4">
            {CONTENT.map(([title, body]) => (
              <div key={title} className="rounded-md border border-border p-4">
                <p className="text-sm font-medium">{title}</p>
                <p className="mt-1 text-sm text-muted-foreground">{body}</p>
              </div>
            ))}
          </VStack>
        </Container>
      </NavbarProvider>
    </div>
  );
}

<!-- apps/docs/src/components/examples/navbar/floating/svelte.svelte -->
<script lang="ts">
  import {
    Navbar,
    NavbarProvider,
    NavbarBrand,
    NavbarMenu,
    NavbarActions,
    NavbarTrigger,
    NavbarMobileOverlay,
    Container,
    VStack,
    NavbarMenuList,
    NavbarMenuItem,
    NavbarMenuTrigger,
    NavbarMenuContent,
    NavbarMenuLink,
    NavbarMobileMenu,
    NavbarMobileMenuTrigger,
    NavbarMobileMenuContent,
  } from '@cloudvoyant/helical-svelte';
  import HelicalLogo from '../../HelicalLogo.svelte';

  const CONTENT: [string, string][] = [
    ['About', 'A brief history of helical-ui and its guiding principles.'],
    ['Installation', 'Add helical-ui to your Astro, Vite, or framework project.'],
    ['Components', 'Every component, demoed and documented for React and Svelte.'],
    ['Theming', 'Light and dark themes over the shadcn token model.'],
    ['Accessibility', "Roles, focus, and keyboard behavior come from Ark's state machine."],
    ['Roadmap', 'What is coming next — from drawers to tours.'],
  ];
</script>

<div class="relative h-[420px] overflow-y-auto overscroll-y-contain rounded-md bg-background">
  <NavbarProvider>
    <Navbar variant="shrink" floating class="sticky top-4 z-30">
        <NavbarBrand>
          <HelicalLogo class="h-7 w-auto" /><span class="text-sm font-semibold">helical-ui</span>
        </NavbarBrand>
        <NavbarMenu placement="left">
          <NavbarMenuList>
            <NavbarMenuItem value="docs" variant="link">
              <NavbarMenuTrigger>Docs</NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="#">Components</NavbarMenuLink>
                <NavbarMenuLink href="#">Theming</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenuItem>
            <NavbarMenuItem value="blog" variant="link">
              <NavbarMenuLink href="#">Blog</NavbarMenuLink>
            </NavbarMenuItem>
          </NavbarMenuList>
        </NavbarMenu>
        <NavbarActions>
          <a href="#" class="text-sm font-medium text-muted-foreground hover:text-foreground">Sign in</a>
        </NavbarActions>
        <NavbarTrigger />
      <NavbarMobileOverlay>
        <NavbarMobileMenu>
          <NavbarMobileMenuTrigger>Docs</NavbarMobileMenuTrigger>
          <NavbarMobileMenuContent>
            <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Components</a>
            <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Theming</a>
          </NavbarMobileMenuContent>
        </NavbarMobileMenu>
        <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Blog</a>
      </NavbarMobileOverlay>
    </Navbar>
    <Container class="py-6 pt-20">
      <VStack class="gap-4">
        {#each CONTENT as [title, body] (title)}
          <div class="rounded-md border border-border p-4">
            <p class="text-sm font-medium">{title}</p>
            <p class="mt-1 text-sm text-muted-foreground">{body}</p>
          </div>
        {/each}
      </VStack>
    </Container>
  </NavbarProvider>
</div>

Hide

// apps/docs/src/components/examples/navbar/hide/react.tsx
import {
  Navbar,
  NavbarProvider,
  NavbarActivationArea,
  NavbarBrand,
  NavbarMenu,
  NavbarActions,
  NavbarTrigger,
  NavbarMobileOverlay,
  Container,
  VStack,
  NavbarMenuList,
  NavbarMenuItem,
  NavbarMenuTrigger,
  NavbarMenuContent,
  NavbarMenuLink,
  NavbarMobileMenu,
  NavbarMobileMenuTrigger,
  NavbarMobileMenuContent,
} from '@cloudvoyant/helical-react';
import { HelicalLogo } from '../../HelicalLogo';

const CONTENT = [
  ['About', 'A brief history of helical-ui and its guiding principles.'],
  ['Installation', 'Add helical-ui to your Astro, Vite, or framework project.'],
  ['Components', 'Every component, demoed and documented for React and Svelte.'],
  ['Theming', 'Light and dark themes over the shadcn token model.'],
  ['Accessibility', "Roles, focus, and keyboard behavior come from Ark's state machine."],
  ['Roadmap', 'What is coming next — from drawers to tours.'],
];

export default function ReactNavbarHide() {
  return (
    <div className="relative h-[420px] overflow-y-auto overscroll-y-contain rounded-md bg-background">
      <NavbarProvider>
        <NavbarActivationArea className="sticky top-0 -mb-12" />
        <Navbar variant="hide">
          <NavbarBrand>
            <HelicalLogo className="h-7 w-auto" />
            <span className="text-sm font-semibold">helical-ui</span>
          </NavbarBrand>
          <NavbarMenu placement="center">
            <NavbarMenuList>
              <NavbarMenuItem value="docs" variant="link">
                <NavbarMenuTrigger>Docs</NavbarMenuTrigger>
                <NavbarMenuContent>
                  <NavbarMenuLink href="#">Components</NavbarMenuLink>
                  <NavbarMenuLink href="#">Theming</NavbarMenuLink>
                </NavbarMenuContent>
              </NavbarMenuItem>
              <NavbarMenuItem value="blog" variant="link">
                <NavbarMenuLink href="#">Blog</NavbarMenuLink>
              </NavbarMenuItem>
            </NavbarMenuList>
          </NavbarMenu>
          <NavbarActions>
            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground">
              Sign in
            </a>
          </NavbarActions>
          <NavbarTrigger />
          <NavbarMobileOverlay>
            <NavbarMobileMenu>
              <NavbarMobileMenuTrigger>Docs</NavbarMobileMenuTrigger>
              <NavbarMobileMenuContent>
                <a
                  href="#"
                  className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                >
                  Components
                </a>
                <a
                  href="#"
                  className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                >
                  Theming
                </a>
              </NavbarMobileMenuContent>
            </NavbarMobileMenu>
            <a
              href="#"
              className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
            >
              Blog
            </a>
          </NavbarMobileOverlay>
        </Navbar>
        <Container className="py-6">
          <VStack className="gap-4">
            <p className="rounded-md bg-muted/50 p-4 text-sm text-muted-foreground">
              With <code>variant="hide"</code> the bar slides away once you scroll past it — hover the top strip (or the
              bar) to bring it back.
            </p>
            {CONTENT.map(([title, body]) => (
              <div key={title} className="rounded-md border border-border p-4">
                <p className="text-sm font-medium">{title}</p>
                <p className="mt-1 text-sm text-muted-foreground">{body}</p>
              </div>
            ))}
          </VStack>
        </Container>
      </NavbarProvider>
    </div>
  );
}

<!-- apps/docs/src/components/examples/navbar/hide/svelte.svelte -->
<script lang="ts">
  import {
    Navbar,
    NavbarProvider,
    NavbarActivationArea,
    NavbarBrand,
    NavbarMenu,
    NavbarActions,
    NavbarTrigger,
    NavbarMobileOverlay,
    Container,
    VStack,
    NavbarMenuList,
    NavbarMenuItem,
    NavbarMenuTrigger,
    NavbarMenuContent,
    NavbarMenuLink,
    NavbarMobileMenu,
    NavbarMobileMenuTrigger,
    NavbarMobileMenuContent,
  } from '@cloudvoyant/helical-svelte';
  import HelicalLogo from '../../HelicalLogo.svelte';

  const CONTENT: [string, string][] = [
    ['About', 'A brief history of helical-ui and its guiding principles.'],
    ['Installation', 'Add helical-ui to your Astro, Vite, or framework project.'],
    ['Components', 'Every component, demoed and documented for React and Svelte.'],
    ['Theming', 'Light and dark themes over the shadcn token model.'],
    ['Accessibility', "Roles, focus, and keyboard behavior come from Ark's state machine."],
    ['Roadmap', 'What is coming next — from drawers to tours.'],
  ];
</script>

<div class="relative h-[420px] overflow-y-auto overscroll-y-contain rounded-md bg-background">
  <NavbarProvider>
    <NavbarActivationArea class="sticky top-0 -mb-12" />
    <Navbar variant="hide">
        <NavbarBrand>
          <HelicalLogo class="h-7 w-auto" /><span class="text-sm font-semibold">helical-ui</span>
        </NavbarBrand>
        <NavbarMenu placement="center">
          <NavbarMenuList>
            <NavbarMenuItem value="docs" variant="link">
              <NavbarMenuTrigger>Docs</NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="#">Components</NavbarMenuLink>
                <NavbarMenuLink href="#">Theming</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenuItem>
            <NavbarMenuItem value="blog" variant="link">
              <NavbarMenuLink href="#">Blog</NavbarMenuLink>
            </NavbarMenuItem>
          </NavbarMenuList>
        </NavbarMenu>
        <NavbarActions>
          <a href="#" class="text-sm font-medium text-muted-foreground hover:text-foreground">Sign in</a>
        </NavbarActions>
        <NavbarTrigger />
      <NavbarMobileOverlay>
        <NavbarMobileMenu>
          <NavbarMobileMenuTrigger>Docs</NavbarMobileMenuTrigger>
          <NavbarMobileMenuContent>
            <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Components</a>
            <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Theming</a>
          </NavbarMobileMenuContent>
        </NavbarMobileMenu>
        <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Blog</a>
      </NavbarMobileOverlay>
    </Navbar>
    <Container class="py-6">
      <VStack class="gap-4">
        <p class="rounded-md bg-muted/50 p-4 text-sm text-muted-foreground">
          With <code>variant="hide"</code> the bar slides away once you scroll past it — hover the top strip
          (or the bar) to bring it back.
        </p>
        {#each CONTENT as [title, body] (title)}
          <div class="rounded-md border border-border p-4">
            <p class="text-sm font-medium">{title}</p>
            <p class="mt-1 text-sm text-muted-foreground">{body}</p>
          </div>
        {/each}
      </VStack>
    </Container>
  </NavbarProvider>
</div>

Scroll

// apps/docs/src/components/examples/navbar/scroll/react.tsx
import {
  Navbar,
  NavbarProvider,
  NavbarBrand,
  NavbarMenu,
  NavbarActions,
  NavbarTrigger,
  NavbarMobileOverlay,
  Container,
  VStack,
  NavbarMenuList,
  NavbarMenuItem,
  NavbarMenuTrigger,
  NavbarMenuContent,
  NavbarMenuLink,
  NavbarMobileMenu,
  NavbarMobileMenuTrigger,
  NavbarMobileMenuContent,
} from '@cloudvoyant/helical-react';
import { HelicalLogo } from '../../HelicalLogo';

const CONTENT = [
  ['About', 'A brief history of helical-ui and its guiding principles.'],
  ['Installation', 'Add helical-ui to your Astro, Vite, or framework project.'],
  ['Components', 'Every component, demoed and documented for React and Svelte.'],
  ['Theming', 'Light and dark themes over the shadcn token model.'],
  ['Accessibility', "Roles, focus, and keyboard behavior come from Ark's state machine."],
  ['Roadmap', 'What is coming next — from drawers to tours.'],
];

export default function ReactNavbarScroll() {
  return (
    <div className="relative h-[420px] overflow-y-auto overscroll-y-contain rounded-md bg-background">
      <NavbarProvider>
        <Navbar variant="scroll">
          <NavbarBrand>
            <HelicalLogo className="h-7 w-auto" />
            <span className="text-sm font-semibold">helical-ui</span>
          </NavbarBrand>
          <NavbarMenu placement="center">
            <NavbarMenuList>
              <NavbarMenuItem value="docs" variant="link">
                <NavbarMenuTrigger>Docs</NavbarMenuTrigger>
                <NavbarMenuContent>
                  <NavbarMenuLink href="#">Components</NavbarMenuLink>
                  <NavbarMenuLink href="#">Theming</NavbarMenuLink>
                </NavbarMenuContent>
              </NavbarMenuItem>
              <NavbarMenuItem value="blog" variant="link">
                <NavbarMenuLink href="#">Blog</NavbarMenuLink>
              </NavbarMenuItem>
            </NavbarMenuList>
          </NavbarMenu>
          <NavbarActions>
            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground">
              Sign in
            </a>
          </NavbarActions>
          <NavbarTrigger />
          <NavbarMobileOverlay>
            <NavbarMobileMenu>
              <NavbarMobileMenuTrigger>Docs</NavbarMobileMenuTrigger>
              <NavbarMobileMenuContent>
                <a
                  href="#"
                  className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                >
                  Components
                </a>
                <a
                  href="#"
                  className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                >
                  Theming
                </a>
              </NavbarMobileMenuContent>
            </NavbarMobileMenu>
            <a
              href="#"
              className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
            >
              Blog
            </a>
          </NavbarMobileOverlay>
        </Navbar>
        <Container className="py-6">
          <VStack className="gap-4">
            <p className="rounded-md bg-muted/50 p-4 text-sm text-muted-foreground">
              With <code>variant="scroll"</code> the bar scrolls away with the page — no sticky, no shrink.
            </p>
            {CONTENT.map(([title, body]) => (
              <div key={title} className="rounded-md border border-border p-4">
                <p className="text-sm font-medium">{title}</p>
                <p className="mt-1 text-sm text-muted-foreground">{body}</p>
              </div>
            ))}
          </VStack>
        </Container>
      </NavbarProvider>
    </div>
  );
}

<!-- apps/docs/src/components/examples/navbar/scroll/svelte.svelte -->
<script lang="ts">
  import {
    Navbar,
    NavbarProvider,
    NavbarBrand,
    NavbarMenu,
    NavbarActions,
    NavbarTrigger,
    NavbarMobileOverlay,
    Container,
    VStack,
    NavbarMenuList,
    NavbarMenuItem,
    NavbarMenuTrigger,
    NavbarMenuContent,
    NavbarMenuLink,
    NavbarMobileMenu,
    NavbarMobileMenuTrigger,
    NavbarMobileMenuContent,
  } from '@cloudvoyant/helical-svelte';
  import HelicalLogo from '../../HelicalLogo.svelte';

  const CONTENT: [string, string][] = [
    ['About', 'A brief history of helical-ui and its guiding principles.'],
    ['Installation', 'Add helical-ui to your Astro, Vite, or framework project.'],
    ['Components', 'Every component, demoed and documented for React and Svelte.'],
    ['Theming', 'Light and dark themes over the shadcn token model.'],
    ['Accessibility', "Roles, focus, and keyboard behavior come from Ark's state machine."],
    ['Roadmap', 'What is coming next — from drawers to tours.'],
  ];
</script>

<div class="relative h-[420px] overflow-y-auto overscroll-y-contain rounded-md bg-background">
  <NavbarProvider>
    <Navbar variant="scroll">
        <NavbarBrand>
          <HelicalLogo class="h-7 w-auto" /><span class="text-sm font-semibold">helical-ui</span>
        </NavbarBrand>
        <NavbarMenu placement="center">
          <NavbarMenuList>
            <NavbarMenuItem value="docs" variant="link">
              <NavbarMenuTrigger>Docs</NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="#">Components</NavbarMenuLink>
                <NavbarMenuLink href="#">Theming</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenuItem>
            <NavbarMenuItem value="blog" variant="link">
              <NavbarMenuLink href="#">Blog</NavbarMenuLink>
            </NavbarMenuItem>
          </NavbarMenuList>
        </NavbarMenu>
        <NavbarActions>
          <a href="#" class="text-sm font-medium text-muted-foreground hover:text-foreground">Sign in</a>
        </NavbarActions>
        <NavbarTrigger />
      <NavbarMobileOverlay>
        <NavbarMobileMenu>
          <NavbarMobileMenuTrigger>Docs</NavbarMobileMenuTrigger>
          <NavbarMobileMenuContent>
            <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Components</a>
            <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Theming</a>
          </NavbarMobileMenuContent>
        </NavbarMobileMenu>
        <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Blog</a>
      </NavbarMobileOverlay>
    </Navbar>
    <Container class="py-6">
      <VStack class="gap-4">
        <p class="rounded-md bg-muted/50 p-4 text-sm text-muted-foreground">
          With <code>variant="scroll"</code> the bar scrolls away with the page — no sticky, no shrink.
        </p>
        {#each CONTENT as [title, body] (title)}
          <div class="rounded-md border border-border p-4">
            <p class="text-sm font-medium">{title}</p>
            <p class="mt-1 text-sm text-muted-foreground">{body}</p>
          </div>
        {/each}
      </VStack>
    </Container>
  </NavbarProvider>
</div>

Shrink

// apps/docs/src/components/examples/navbar/shrink/react.tsx
import {
  Navbar,
  NavbarProvider,
  NavbarBrand,
  NavbarMenu,
  NavbarActions,
  NavbarTrigger,
  NavbarMobileOverlay,
  Container,
  VStack,
  NavbarMenuList,
  NavbarMenuItem,
  NavbarMenuTrigger,
  NavbarMenuContent,
  NavbarMenuLink,
  NavbarMobileMenu,
  NavbarMobileMenuTrigger,
  NavbarMobileMenuContent,
} from '@cloudvoyant/helical-react';
import { HelicalLogo } from '../../HelicalLogo';

const CONTENT = [
  ['About', 'A brief history of helical-ui and its guiding principles.'],
  ['Installation', 'Add helical-ui to your Astro, Vite, or framework project.'],
  ['Components', 'Every component, demoed and documented for React and Svelte.'],
  ['Theming', 'Light and dark themes over the shadcn token model.'],
  ['Accessibility', "Roles, focus, and keyboard behavior come from Ark's state machine."],
  ['Roadmap', 'What is coming next — from drawers to tours.'],
];

export default function ReactNavbarShrink() {
  return (
    <div className="relative h-[420px] overflow-y-auto overscroll-y-contain rounded-md bg-background">
      <NavbarProvider>
        <Navbar variant="shrink" className="z-30">
          <NavbarBrand>
            <HelicalLogo className="h-7 w-auto" />
            <span className="text-sm font-semibold">helical-ui</span>
          </NavbarBrand>
          <NavbarMenu placement="center">
            <NavbarMenuList>
              <NavbarMenuItem value="docs" variant="link">
                <NavbarMenuTrigger>Docs</NavbarMenuTrigger>
                <NavbarMenuContent>
                  <NavbarMenuLink href="#">Components</NavbarMenuLink>
                  <NavbarMenuLink href="#">Theming</NavbarMenuLink>
                </NavbarMenuContent>
              </NavbarMenuItem>
              <NavbarMenuItem value="blog" variant="link">
                <NavbarMenuLink href="#">Blog</NavbarMenuLink>
              </NavbarMenuItem>
            </NavbarMenuList>
          </NavbarMenu>
          <NavbarActions>
            <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground">
              Sign in
            </a>
          </NavbarActions>
          <NavbarTrigger />
          <NavbarMobileOverlay>
            <NavbarMobileMenu>
              <NavbarMobileMenuTrigger>Docs</NavbarMobileMenuTrigger>
              <NavbarMobileMenuContent>
                <a
                  href="#"
                  className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                >
                  Components
                </a>
                <a
                  href="#"
                  className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                >
                  Theming
                </a>
              </NavbarMobileMenuContent>
            </NavbarMobileMenu>
            <a
              href="#"
              className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
            >
              Blog
            </a>
          </NavbarMobileOverlay>
        </Navbar>
        <Container className="py-6">
          <VStack className="gap-4">
            <p className="rounded-md bg-muted/50 p-4 text-sm text-muted-foreground">
              Scroll to see the bar shrink — with <code>variant="shrink"</code> the height drops and spacing compacts
              once you pass 24px.
            </p>
            {CONTENT.map(([title, body]) => (
              <div key={title} className="rounded-md border border-border p-4">
                <p className="text-sm font-medium">{title}</p>
                <p className="mt-1 text-sm text-muted-foreground">{body}</p>
              </div>
            ))}
          </VStack>
        </Container>
      </NavbarProvider>
    </div>
  );
}

<!-- apps/docs/src/components/examples/navbar/shrink/svelte.svelte -->
<script lang="ts">
  import {
    Navbar,
    NavbarProvider,
    NavbarBrand,
    NavbarMenu,
    NavbarActions,
    NavbarTrigger,
    NavbarMobileOverlay,
    Container,
    VStack,
    NavbarMenuList,
    NavbarMenuItem,
    NavbarMenuTrigger,
    NavbarMenuContent,
    NavbarMenuLink,
    NavbarMobileMenu,
    NavbarMobileMenuTrigger,
    NavbarMobileMenuContent,
  } from '@cloudvoyant/helical-svelte';
  import HelicalLogo from '../../HelicalLogo.svelte';

  const CONTENT: [string, string][] = [
    ['About', 'A brief history of helical-ui and its guiding principles.'],
    ['Installation', 'Add helical-ui to your Astro, Vite, or framework project.'],
    ['Components', 'Every component, demoed and documented for React and Svelte.'],
    ['Theming', 'Light and dark themes over the shadcn token model.'],
    ['Accessibility', "Roles, focus, and keyboard behavior come from Ark's state machine."],
    ['Roadmap', 'What is coming next — from drawers to tours.'],
  ];
</script>

<div class="relative h-[420px] overflow-y-auto overscroll-y-contain rounded-md bg-background">
  <NavbarProvider>
    <Navbar variant="shrink" class="z-30">
        <NavbarBrand>
          <HelicalLogo class="h-7 w-auto" /><span class="text-sm font-semibold">helical-ui</span>
        </NavbarBrand>
        <NavbarMenu placement="center">
          <NavbarMenuList>
            <NavbarMenuItem value="docs" variant="link">
              <NavbarMenuTrigger>Docs</NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="#">Components</NavbarMenuLink>
                <NavbarMenuLink href="#">Theming</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenuItem>
            <NavbarMenuItem value="blog" variant="link">
              <NavbarMenuLink href="#">Blog</NavbarMenuLink>
            </NavbarMenuItem>
          </NavbarMenuList>
        </NavbarMenu>
        <NavbarActions>
          <a href="#" class="text-sm font-medium text-muted-foreground hover:text-foreground">Sign in</a>
        </NavbarActions>
        <NavbarTrigger />
      <NavbarMobileOverlay>
        <NavbarMobileMenu>
          <NavbarMobileMenuTrigger>Docs</NavbarMobileMenuTrigger>
          <NavbarMobileMenuContent>
            <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Components</a>
            <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Theming</a>
          </NavbarMobileMenuContent>
        </NavbarMobileMenu>
        <a href="#" class="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground">Blog</a>
      </NavbarMobileOverlay>
    </Navbar>
    <Container class="py-6">
      <VStack class="gap-4">
        <p class="rounded-md bg-muted/50 p-4 text-sm text-muted-foreground">
          Scroll to see the bar shrink — with <code>variant="shrink"</code> the height drops and spacing
          compacts once you pass 24px.
        </p>
        {#each CONTENT as [title, body] (title)}
          <div class="rounded-md border border-border p-4">
            <p class="text-sm font-medium">{title}</p>
            <p class="mt-1 text-sm text-muted-foreground">{body}</p>
          </div>
        {/each}
      </VStack>
    </Container>
  </NavbarProvider>
</div>

Two Columns

// apps/docs/src/components/examples/navbar/two-columns/react.tsx
import {
  Navbar,
  NavbarProvider,
  NavbarMenu,
  NavbarMenuList,
  NavbarMenuItem,
  NavbarMenuTrigger,
  NavbarMenuContent,
  NavbarMenuLink,
  Row,
  Col,
} from '@cloudvoyant/helical-react';

const gettingStarted = [
  { title: 'Introduction', description: 'Rebuilt components with accessible markup, in React and Svelte.', href: '#' },
  { title: 'Installation', description: 'Add helical-ui to your Astro, Vite, or framework project.', href: '#' },
  { title: 'Typography', description: 'Type scale, headings, and inline text styles.', href: '#' },
  { title: 'Theming', description: 'Light and dark themes over the shadcn token model.', href: '#' },
];

const resources = [
  { title: 'Why helical-ui?', description: 'Layout primitives, shared cva, and thin Ark wrappers.', href: '#' },
  {
    title: 'Packages',
    description: '@cloudvoyant/helical-ui, @cloudvoyant/helical-react, and @cloudvoyant/helical-svelte.',
    href: '#',
  },
  { title: 'Components', description: 'Every component, demoed and documented.', href: '#' },
];

function MenuLink({ title, description, href }: (typeof gettingStarted)[number]) {
  return (
    <NavbarMenuLink href={href}>
      <span className="text-sm font-medium leading-none">{title}</span>
      <span className="mt-1 line-clamp-2 text-sm leading-snug text-muted-foreground">{description}</span>
    </NavbarMenuLink>
  );
}

export default function ReactNavbarMenuTwoColumns() {
  return (
    <NavbarProvider>
      <Navbar variant="scroll">
        <NavbarMenu>
          <NavbarMenuList>
            <NavbarMenuItem value="getting-started">
              <NavbarMenuTrigger>Getting Started</NavbarMenuTrigger>
              <NavbarMenuContent>
                <Row className="w-[300px] grid grid-cols-1 gap-3 p-4 md:w-[420px] md:grid-cols-2">
                  {gettingStarted.map((link) => (
                    <MenuLink key={link.title} {...link} />
                  ))}
                </Row>
              </NavbarMenuContent>
            </NavbarMenuItem>
            <NavbarMenuItem value="resources">
              <NavbarMenuTrigger>Resources</NavbarMenuTrigger>
              <NavbarMenuContent>
                <Row className="w-[300px] grid grid-cols-1 gap-3 p-4 md:w-[520px] md:grid-cols-[0.75fr_1fr]">
                  <Col className="row-span-3 justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6">
                    <span className="text-base font-medium">helical-ui</span>
                    <p className="mt-1 text-sm leading-tight text-muted-foreground">
                      A React + Svelte component library built on Ark UI, with a shared framework-agnostic core.
                    </p>
                  </Col>
                  {resources.map((link) => (
                    <MenuLink key={link.title} {...link} />
                  ))}
                </Row>
              </NavbarMenuContent>
            </NavbarMenuItem>
            <NavbarMenuItem value="docs">
              <NavbarMenuLink href="#">Documentation</NavbarMenuLink>
            </NavbarMenuItem>
          </NavbarMenuList>
        </NavbarMenu>
      </Navbar>
    </NavbarProvider>
  );
}

<!-- apps/docs/src/components/examples/navbar/two-columns/svelte.svelte -->
<script lang="ts">
  import {
    Navbar,
    NavbarProvider,
    NavbarMenu,
    NavbarMenuList,
    NavbarMenuItem,
    NavbarMenuTrigger,
    NavbarMenuContent,
    NavbarMenuLink,
    Row,
    Col,
  } from '@cloudvoyant/helical-svelte';

  const gettingStarted = [
    { title: 'Introduction', description: 'Rebuilt components with accessible markup, in React and Svelte.', href: '#' },
    { title: 'Installation', description: 'Add helical-ui to your Astro, Vite, or framework project.', href: '#' },
    { title: 'Typography', description: 'Type scale, headings, and inline text styles.', href: '#' },
    { title: 'Theming', description: 'Light and dark themes over the shadcn token model.', href: '#' },
  ];

  const resources = [
    { title: 'Why helical-ui?', description: 'Layout primitives, shared cva, and thin Ark wrappers.', href: '#' },
    { title: 'Packages', description: '@cloudvoyant/helical-ui, @cloudvoyant/helical-react, and @cloudvoyant/helical-svelte.', href: '#' },
    { title: 'Components', description: 'Every component, demoed and documented.', href: '#' },
  ];
</script>

<NavbarProvider>
  <Navbar variant="scroll">
    <NavbarMenu>
      <NavbarMenuList>
        <NavbarMenuItem value="getting-started">
          <NavbarMenuTrigger>Getting Started</NavbarMenuTrigger>
          <NavbarMenuContent>
            <Row class="w-[300px] grid grid-cols-1 gap-3 p-4 md:w-[420px] md:grid-cols-2">
              {#each gettingStarted as link (link.title)}
                <NavbarMenuLink href={link.href}>
                  <span class="text-sm font-medium leading-none">{link.title}</span>
                  <span class="mt-1 line-clamp-2 text-sm leading-snug text-muted-foreground">{link.description}</span>
                </NavbarMenuLink>
              {/each}
            </Row>
          </NavbarMenuContent>
        </NavbarMenuItem>
        <NavbarMenuItem value="resources">
          <NavbarMenuTrigger>Resources</NavbarMenuTrigger>
          <NavbarMenuContent>
            <Row class="w-[300px] grid grid-cols-1 gap-3 p-4 md:w-[520px] md:grid-cols-[0.75fr_1fr]">
              <Col class="row-span-3 justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6">
                <span class="text-base font-medium">helical-ui</span>
                <p class="mt-1 text-sm leading-tight text-muted-foreground">
                  A React + Svelte component library built on Ark UI, with a shared framework-agnostic core.
                </p>
              </Col>
              {#each resources as link (link.title)}
                <NavbarMenuLink href={link.href}>
                  <span class="text-sm font-medium leading-none">{link.title}</span>
                  <span class="mt-1 line-clamp-2 text-sm leading-snug text-muted-foreground">{link.description}</span>
                </NavbarMenuLink>
              {/each}
            </Row>
          </NavbarMenuContent>
        </NavbarMenuItem>
        <NavbarMenuItem value="docs">
          <NavbarMenuLink href="#">Documentation</NavbarMenuLink>
        </NavbarMenuItem>
      </NavbarMenuList>
    </NavbarMenu>
  </Navbar>
</NavbarProvider>

Variants

// apps/docs/src/components/examples/navbar/variants/react.tsx
import {
  Navbar,
  NavbarProvider,
  NavbarMenu,
  NavbarMenuList,
  NavbarMenuItem,
  NavbarMenuTrigger,
  NavbarMenuContent,
  NavbarMenuLink,
} from '@cloudvoyant/helical-react';

export default function ReactNavbarMenuVariants() {
  return (
    <NavbarProvider>
      <Navbar variant="scroll">
        <NavbarMenu>
          <NavbarMenuList>
            <NavbarMenuItem variant="link" value="getting-started">
              <NavbarMenuTrigger>Getting Started</NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="#">Installation</NavbarMenuLink>
                <NavbarMenuLink href="#">Components</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenuItem>
            <NavbarMenuItem variant="link" value="blog">
              {/* asChild lets the trigger render as a real link instead of a button. */}
              <NavbarMenuTrigger asChild>
                <a href="#">Blog</a>
              </NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="#">Articles</NavbarMenuLink>
                <NavbarMenuLink href="#">Tutorials</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenuItem>
            <NavbarMenuItem variant="link" value="docs">
              <NavbarMenuLink href="#">Docs</NavbarMenuLink>
            </NavbarMenuItem>
          </NavbarMenuList>
        </NavbarMenu>
      </Navbar>
    </NavbarProvider>
  );
}

<!-- apps/docs/src/components/examples/navbar/variants/svelte.svelte -->
<script lang="ts">
  import {
    Navbar,
    NavbarProvider,
    NavbarMenu,
    NavbarMenuList,
    NavbarMenuItem,
    NavbarMenuTrigger,
    NavbarMenuContent,
    NavbarMenuLink,
  } from '@cloudvoyant/helical-svelte';
</script>

<NavbarProvider>
  <Navbar variant="scroll">
    <NavbarMenu>
      <NavbarMenuList>
        <NavbarMenuItem variant="link" value="getting-started">
          <NavbarMenuTrigger>Getting Started</NavbarMenuTrigger>
          <NavbarMenuContent>
            <NavbarMenuLink href="#">Installation</NavbarMenuLink>
            <NavbarMenuLink href="#">Components</NavbarMenuLink>
          </NavbarMenuContent>
        </NavbarMenuItem>
        <NavbarMenuItem variant="link" value="blog">
          <NavbarMenuLink href="#">Blog</NavbarMenuLink>
        </NavbarMenuItem>
        <NavbarMenuItem variant="link" value="docs">
          <NavbarMenuLink href="#">Docs</NavbarMenuLink>
        </NavbarMenuItem>
      </NavbarMenuList>
    </NavbarMenu>
  </Navbar>
</NavbarProvider>

API Reference

NavbarProvider

A pure context provider — it renders no DOM and accepts no styling props. Provides the open/scrolled/hovered state and the brand/actions slots to the parts below.

Props

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Initial mobile-menu open state.

The <header> element and the config owner. Takes variant/floating/density and provides them (plus the provider’s state) to the parts beneath it. It is also the bar itself — the flex row carrying the brand, menu, and actions (density sets its height/padding), so there is no separate inner wrapper. Sets data-scrolled once past 24px, data-shrunk when the shrink variant has scrolled, and data-hidden when the hide variant is scrolled away.

Props

Prop	Type	Default	Description
`variant`	`'scroll' \| 'sticky' \| 'shrink' \| 'hide'`	`'sticky'`	Bar behavior. `scroll` scrolls away with the page. `sticky` pins to the top. `shrink` pins and compacts to the compact density once scrolled past 24px. `hide` pins, then slides away once scrolled past 24px while not hovered (revealed on hover of the bar or an `NavbarActivationArea`).
`floating`	`boolean`	`false`	Render as a floating pill (rounded, inset) instead of a full-width bar. Orthogonal to `variant`.
`density`	`'relaxed' \| 'compact'`	`'relaxed'`	Bar density. `relaxed` is the spacious default (`h-16`). `compact` uses a tighter `h-12` bar.

Accepts standard <header> attributes plus className/class.

NavbarActivationArea

An invisible hover strip (fixed to the top edge by default) that reveals a hidden variant="hide" bar on hover. Supports asChild and standard element attributes plus className/class — override navbarActivationAreaBase (e.g. absolute inside a scroll container) via className.

NavbarBrand

The brand/logo slot (left side). Accepts standard element attributes plus className/class.

NavbarMenu

The Navbar’s desktop menu — a thin wrapper over the coupled NavbarMenu navigation menu; children are NavbarMenuList items. Hidden below md. The trigger density follows the bar — relaxed by default, compact when density="compact" or when the shrink variant has scrolled. All parts are based on Ark UI navigation-menu and must render within a NavbarProvider.

Props

Prop	Type	Default	Description
`placement`	`'left' \| 'center' \| 'right'`	`'center'`	Horizontal placement of the menu items.

Accepts all Ark NavigationMenuRoot props plus className/class.

NavbarMenuTrigger

Accepts all Ark NavigationMenuTrigger props. Applies navbarMenuTriggerStyle() and renders a chevron that rotates when its item is open.

NavbarMenuItem

Prop	Type	Default	Description
`value`	`string`	—	Identifies the item.
`disabled`	`boolean`	`false`	Disables the item.
`variant`	`'default' \| 'link'`	`'default'`	Trigger treatment. `link` styles the item’s trigger/link as a text link — transparent background, `text-muted-foreground` with `hover:text-foreground` and `data-[state=open]:text-primary` — matching a top nav of plain links. Combine with `NavbarMenuTrigger asChild` to render the trigger as an actual `<a>`.

NavbarMenuContent

Accepts all Ark NavigationMenuContent props. Renders the dropdown panel; portal into the shared viewport is handled by Ark.

NavbarMenuLink

Accepts all Ark NavigationMenuLink props. Renders an <a> styled as a menu link.

Other parts

NavbarMenuList, NavbarMenuViewport, NavbarMenuViewportPositioner, NavbarMenuIndicator, NavbarMobileMenu, NavbarMobileMenuTrigger, NavbarMobileMenuContent — each accepts its native element props plus className/class. The NavbarMobileMenu* parts render the mobile disclosure groups inside NavbarMobileOverlay, powered by Ark collapsible.

NavbarActions

The actions slot (right side, e.g. sign-in buttons). Accepts standard element attributes plus className/class.

NavbarTrigger

The mobile hamburger that toggles the mobile panel. Renders a default hamburger icon unless given children. Accepts standard button attributes; aria-label defaults to "Toggle navigation menu".

NavbarMobileOverlay

The mobile menu panel, shown only below md, powered by Ark collapsible. Accepts standard element attributes plus className/class.

Accessibility

The mobile disclosure uses Ark’s collapsible primitive, so aria-expanded, aria-controls, and Escape behavior come from Ark. The trigger is a native button with a default aria-label="Toggle navigation menu". The desktop menu uses NavbarMenu’s Ark navigation-menu semantics (roving tabindex, arrow keys, roles).

Theming

No theme extension is required — the bar/pill and its states use existing tokens (bg-background, border-border, bg-accent, shadow-md, backdrop-blur), light and dark.