Navbar

Compound sticky header with three slots: brand, nav links, and actions.

Preview

Anex UI

Usage

import { Navbar, NavbarBrand, NavbarNav, NavbarActions, Button } from "anexui";

<Navbar>
  <NavbarBrand>My App</NavbarBrand>
  <NavbarNav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </NavbarNav>
  <NavbarActions>
    <Button variant="outline" size="sm">Sign in</Button>
    <Button variant="primary" size="sm">Sign up</Button>
  </NavbarActions>
</Navbar>

Sub-components

NavbarBrand

Renders the logo or site name on the left side of the bar.

<NavbarBrand>
  <img src="/logo.svg" alt="Logo" width={28} height={28} />
  My App
</NavbarBrand>

NavbarNav

Horizontal list of navigation links rendered in the centre.

<NavbarNav>
  <a href="/docs">Docs</a>
  <a href="/blog">Blog</a>
</NavbarNav>

NavbarActions

Right-aligned slot for buttons, icons, or any action controls.

<NavbarActions>
  <Button variant="primary" size="sm">Sign up</Button>
</NavbarActions>

| Prop | Type | Default | Description | |---|---|---|---| | sticky | boolean | true | Pins the bar to the top of the viewport with position: sticky | | className | string | — | Extra class names on the root <header> | | children | ReactNode | — | Accepts NavbarBrand, NavbarNav, and NavbarActions |

NavbarBrand Props

| Prop | Type | Description | |---|---|---| | className | string | Extra class names | | children | ReactNode | Logo image, text, or both |

NavbarNav Props

| Prop | Type | Description | |---|---|---| | className | string | Extra class names | | children | ReactNode | Anchor elements or custom link components |

NavbarActions Props

| Prop | Type | Description | |---|---|---| | className | string | Extra class names | | children | ReactNode | Buttons, icons, or any action controls |

Documentation