TopNav

Top application bar with heading, start/center/end zones, and optional menus. Place TopNav.Item links in the start zone (or as children), and use TopNav.Menu / TopNav.MegaMenu for richer flyouts.

Examples

Default

A simple bar of selected and unselected items.

import { TopNav } from '@var-ui/react';

<TopNav>
  <TopNav.Item label="Home" href="/" isSelected />
  <TopNav.Item label="Docs" href="/docs" />
</TopNav>

Items and menu

Mix TopNav.Items with a TopNav.Menu hover/focus popover of rich items (title + optional description).

import { TopNav } from '@var-ui/react';

<TopNav heading={<TopNav.Heading heading="Acme" />}>
  <TopNav.Item label="Home" href="/" isSelected />
  <TopNav.Item label="Docs" href="/docs" />
  <TopNav.Menu
    label="Products"
    items={[
      { id: 'cloud', title: 'Cloud', description: 'Deploy anywhere', href: '/cloud' },
      { id: 'analytics', title: 'Analytics', description: 'Measure what matters', href: '/analytics' },
    ]}
  />
</TopNav>

Props

Accessibility

The root is a nav landmark (label defaults to "Top navigation"). Selected items set aria-current="page"; icon-only items keep label as aria-label. TopNav.Menu opens on hover or keyboard focus via HoverCard — keep item titles clear so the popover list is usable without relying on icons alone.