# 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.

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

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

```astro
---
import { TopNav, TopNavItem } from '@var-ui/astro';
---
<TopNav>
  <TopNavItem label="Home" href="/" isSelected />
  <TopNavItem label="Docs" href="/docs" />
</TopNav>
```

```html
<nav class="var-ui-top-nav" aria-label="Top navigation">…</nav>
```

### Items and menu

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

```tsx
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>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| centerContent | ReactNode | no |  | Centered content — switches the root to a 3-column grid layout when set. |
| children | ReactNode | no |  | Content that begins the bar (nav items, `TopNav.Menu` / `TopNav.MegaMenu`). Alias for `startContent`. |
| className | string \| undefined | no |  |  |
| endContent | ReactNode | no |  |  |
| heading | ReactNode | no |  | Brand block, usually a `TopNav.Heading`. |
| label | string \| undefined | no | 'Top navigation' | Accessible name for the `nav` landmark. |
| startContent | ReactNode | no |  |  |

## 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.