Skip to content
Alea0.1

Navigation

Navbar

A site header with brand, links (with mega menus), and actions; below a breakpoint the links move into a drawer behind the burger.

Ant Design: Layout.Header + Menu

import { Navbar } from '@alea/ui';

Examples

Props

Navbar props

A site header: brand, links with optional mega menus, actions; on small screens the links move into a drawer (Ant Layout.Header + Menu, Mantine Header).

PropTypeDefaultDescription
brandrequiredReactNode-The logo or name, usually a link home.
itemsrequired(NavLinkItem | { label: string; items: NavLinkItem[]; footer?: ReactNode; })[]-The links: the same items as NavigationMenu (links, or groups with panels).
actionsReactNode-Things on the right: theme toggle, sign in, a call to action. Also shown in the drawer on small screens.
aria-labelstring-Name of the navigation. Default "Main".
classNamestring-
collapseBelow"sm" | "md" | "lg"'md'Below this width the links move into a drawer behind a burger. Default md (768 px).
currentstring-The href of the current page.
stickybooleantrueStick to the top while scrolling, with a blurred background. Default true.

Accessibility

  • A header landmark with a named navigation; the drawer is a dialog that traps focus and returns it to the burger.
  • The current page gets aria-current in both the bar and the drawer.

Keyboard

KeyDoes
TabMoves through links and actions
Enter or Space (burger)Opens the menu drawer
EscapeCloses the drawer

Do and don't

Do

  • Keep the top level to five links or fewer.
  • Put the main call to action in actions.

Don't

  • Don't hide the search on mobile if it is the main way in.
NavigationMenu Burger AppShell
Tested with axe, keyboard and screen reader roles