@thebase/ui/docs/components/navigation-menu.md

CDN-installable Owl and Bootstrap 5 UI component library.

# Navigation Menu

Use `b-ui="navigation-menu"` for horizontal site or app navigation.

## Pure Owl component

```js
import { NavigationMenu, NavigationMenuItem } from "@thebase/ui";
```

```base-ui
<div style="max-width: 40rem" class="w-100">
  <NavigationMenu>
    <NavigationMenuItem href="'#home'">Home</NavigationMenuItem>
    <NavigationMenuItem href="'#components'">Components</NavigationMenuItem>
    <NavigationMenuItem href="'/docs'">Docs</NavigationMenuItem>
    <NavigationMenuItem href="'#list'">List</NavigationMenuItem>
    <NavigationMenuItem href="'#simple'">Simple</NavigationMenuItem>
    <NavigationMenuItem href="'#with-icon'">With Icon</NavigationMenuItem>
  </NavigationMenu>
</div>
```

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `NavigationMenu` | `className` | `String` | optional |
| `NavigationMenuItem` | `href` | `String` | optional |
| `NavigationMenuItem` | `className` | `String` | optional |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

## Static component

```base-ui
<nav b-ui="navigation-menu" aria-label="Main">
  <a href="/">Home</a>
  <a href="/docs" aria-current="page">Docs</a>
</nav>
```

BaseUI adds `menubar`/`menuitem` roles and Left/Right arrow focus movement.