Navbar

VdNavbar is a responsive top navigation bar with brand, default, and actions slots, a built-in mobile hamburger + slide-in menu, optional dropdowns, and scroll-aware glass/transparent framing. It emits open/close/toggle and exposes imperative open() / close() / toggle() controls.

Live Demo

A real <VdNavbar> (rendered position="static" so it stays inside the card). Narrow the viewport to reveal the hamburger and slide-in menu.

Mobile menu is closed (from the @toggle event).

Dark Theme (dark prop)

Light navbar

Usage

Compose the bar with the three named slots. The default slot is the collapsible menu — drop a .vd-navbar-nav list inside it:

<script setup lang="ts">
import { VdNavbar } from "@vanduo-oss/vd3";
</script>

<template>
  <VdNavbar position="sticky">
    <template #brand>
      <a href="/">Vanduo</a>
    </template>

    <!-- Default slot: the collapsible menu content -->
    <ul class="vd-navbar-nav">
      <li><a class="vd-nav-link active" href="/">Home</a></li>
      <li><a class="vd-nav-link" href="/docs">Docs</a></li>
      <li><a class="vd-nav-link" href="/about">About</a></li>
    </ul>

    <template #actions>
      <button class="vd-btn vd-btn-primary vd-btn-sm">Sign in</button>
    </template>
  </VdNavbar>
</template>

Nested Dropdowns

Wrap a nav item in .vd-navbar-dropdown with a .vd-navbar-dropdown-menu child. Below the collapse breakpoint the parent link toggles the submenu instead of navigating:

<VdNavbar>
  <ul class="vd-navbar-nav">
    <li><a class="vd-nav-link active" href="/">Home</a></li>
    <li class="vd-navbar-dropdown">
      <a class="vd-nav-link" href="#">Products</a>
      <div class="vd-navbar-dropdown-menu">
        <a class="vd-navbar-dropdown-item" href="/app">App</a>
        <a class="vd-navbar-dropdown-item" href="/api">API</a>
      </div>
    </li>
  </ul>
</VdNavbar>

CSS Variables

Variable	Default
`--vd-navbar-bg`	`var(--vd-color-white)`
`--vd-navbar-text-color`	`var(--vd-text-primary)`
`--vd-navbar-link-color`	`var(--vd-text-primary)`
`--vd-navbar-link-hover-color`	`var(--vd-color-primary)`
`--vd-navbar-link-active-color`	`var(--vd-color-primary)`
`--vd-navbar-height`	`3.4375rem (55px, fib)`
`--vd-navbar-padding-x`	`1.3125rem (21px, fib)`
`--vd-navbar-nav-gap`	`1.3125rem (21px, fib)`
`--vd-navbar-actions-gap`	`2.125rem (34px, fib)`
`--vd-navbar-mobile-menu-width`	`233px (fib)`

API Reference

Props

Prop	Type	Description
`variant`	`"solid" \| "transparent" \| "glass"`	Surface treatment (default "solid"). glass/transparent gain scroll-activated framing (the .vd-navbar-scrolled class engages once you scroll past the threshold).
`dark`	`boolean`	Applies the dark navbar theme (.vd-navbar-dark). Orthogonal to variant. Default false.
`position`	`"static" \| "fixed" \| "fixed-bottom" \| "sticky"`	Positioning modifier (default "static"). fixed / fixed-bottom / sticky attach the bar to the viewport.
`scrollThreshold`	`number`	Scroll distance in px before .vd-navbar-scrolled engages for glass/transparent variants (default: component-resolved).
`toggleLabel`	`string`	Accessible label for the mobile hamburger toggle (default "Toggle navigation").
`closeOnNavigate`	`boolean`	Close the mobile menu when a non-dropdown nav link is clicked (default true).

Events

Event	Payload	Description
`open`	`—`	Emitted when the mobile menu opens.
`close`	`—`	Emitted when the mobile menu closes.
`toggle`	`open: boolean`	Emitted on every open/close with the new menu state.

Slots

Slot	Description
`brand`	Brand / logo area, rendered inside .vd-navbar-brand. Omitted from the DOM when empty.
`default`	The collapsible menu content — place your <ul class="vd-navbar-nav"> here. Rendered inside .vd-navbar-menu.
`actions`	Trailing CTA area (buttons, theme switcher…), rendered inside .vd-navbar-actions. Omitted when empty.

Exposed (template ref)

Member	Description
`isOpen`	Reactive boolean reflecting the mobile-menu open state.
`open()`	Imperatively open the mobile menu.
`close()`	Imperatively close the mobile menu.
`toggle()`	Imperatively toggle the mobile menu.

CSS Classes (slot content)

Class	Description
`.vd-navbar-nav`	List wrapper for a group of navigation links (place in the default slot).
`.vd-nav-link`	Individual link within the menu. Append .active for the current route.
`.vd-navbar-dropdown`	Wraps a nav item that owns a nested menu; below the breakpoint its link toggles the submenu instead of navigating.
`.vd-navbar-dropdown-menu`	Container for the nested dropdown items (add .is-open is handled for you on mobile).
`.vd-navbar-dropdown-item`	Individual link inside a dropdown menu.