Navbar

The bar across the top of a page. Pure layout: no component library renders this one, and what goes in it is buttons, links and menus.

alpha The class names and states here are stable. The look is not: these styles can change in a minor release, without a major version bump.

Class	Does what
`navbar`	The bar: a padded row with a rule under it
`navbar-start`	Left group, pushes the rest to the end
`navbar-end`	Right group
`menubar`	A row of menu triggers, for Kobalte's Menubar

Basic

Same markup in both builds

<div class="navbar">
  <div class="navbar-start">
    <strong>Sparkstone</strong>
    <a href="#" class="link">Docs</a>
    <a href="#" class="link">Pricing</a>
  </div>
  <div class="navbar-end">
    <button class="btn btn-ghost">Sign in</button>
    <button class="btn">Start</button>
  </div>
</div>

With a menubar

Kobalte's Menubar is role="menubar", so the row styles itself. Its triggers are divs with no role, so they take .menu-item, and each menu that opens is the same dropdown panel.

<div class="navbar">
  <div class="navbar-start">
    <strong>Editor</strong>
    <div class="menubar">
      <span class="menu-item">File</span>
      <span class="menu-item menu-active">Edit</span>
      <span class="menu-item">View</span>
    </div>
  </div>
</div>
<div class="dropdown-content menu" style="width: 12rem; margin-top: 0.25rem">
  <span class="menu-item">Undo <span class="menu-shortcut">⌘Z</span></span>
  <span class="menu-item">Redo <span class="menu-shortcut">⇧⌘Z</span></span>
</div>

<div class="navbar">
  <div class="navbar-start">
    <strong>Editor</strong>
    <div class="menubar">
      <span class="menu-item">File</span>
      <span class="menu-item menu-active">Edit</span>
      <span class="menu-item">View</span>
    </div>
  </div>
</div>
<div class="dropdown-content menu" style="width: 12rem; margin-top: 0.25rem">
  <span class="menu-item">Undo <span class="menu-shortcut">⌘Z</span></span>
  <span class="menu-item">Redo <span class="menu-shortcut">⇧⌘Z</span></span>
</div>

import { Menubar } from "@kobalte/core/menubar";

<Menubar>
  <Menubar.Menu>
    <Menubar.Trigger class="menu-item">Edit</Menubar.Trigger>
    <Menubar.Portal>
      <Menubar.Content>
        <Menubar.Item>Undo <span class="menu-shortcut">⌘Z</span></Menubar.Item>
        <Menubar.Item>Redo <span class="menu-shortcut">⇧⌘Z</span></Menubar.Item>
      </Menubar.Content>
    </Menubar.Portal>
  </Menubar.Menu>
</Menubar>

<div class="navbar">
  <div class="navbar-start">
    <strong>Editor</strong>
    <div role="menubar">
      <div class="menu-item">File</div>
      <div class="menu-item" data-highlighted data-expanded>Edit</div>
      <div class="menu-item">View</div>
    </div>
  </div>
</div>
<div role="menu" data-expanded style="width: 12rem; margin-top: 0.25rem">
  <div role="menuitem">Undo <span class="menu-shortcut">⌘Z</span></div>
  <div role="menuitem">Redo <span class="menu-shortcut">⇧⌘Z</span></div>
</div>

Navigation menu and context menu

Two more Kobalte components reuse what is already here, so they need no classes of their own:

ContextMenu renders the same role="menu" and role="menuitem" as a dropdown, so a right-click menu is styled already. Only its trigger is yours to style.
NavigationMenu renders a <ul> with no role, and its triggers are divs. Put .menubar on the root and .menu-item on the triggers; each panel is a .dropdown-content.

<NavigationMenu class="menubar">
  <NavigationMenu.Menu>
    <NavigationMenu.Trigger class="menu-item">Product</NavigationMenu.Trigger>
    <NavigationMenu.Portal>
      <NavigationMenu.Content class="dropdown-content menu">
        <NavigationMenu.Item class="menu-item">Overview</NavigationMenu.Item>
        <NavigationMenu.Item class="menu-item">Changelog</NavigationMenu.Item>
      </NavigationMenu.Content>
    </NavigationMenu.Portal>
  </NavigationMenu.Menu>
</NavigationMenu>

<ContextMenu>
  <ContextMenu.Trigger class="card">Right-click me</ContextMenu.Trigger>
  <ContextMenu.Portal>
    <ContextMenu.Content>
      <ContextMenu.Item>Rename</ContextMenu.Item>
      <ContextMenu.Item>Delete</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Portal>
</ContextMenu>