Elanor

Navigation menu

Last updated

A horizontal list of links for site or app navigation, with optional submenus. For a header that combines it with branding and actions, see Top navigation.

Code
demo.tsx 
import {NavigationMenu} from '@earendil-works/elanor-react';

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu.Root aria-label="Main">
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#" active>
            Overview
          </NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#">Projects</NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#">Members</NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu.Root>
  );
}

Usage

import {NavigationMenu} from '@earendil-works/elanor-react';

<NavigationMenu.Root aria-label="Main">
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Link href="/" active />
    </NavigationMenu.Item>
  </NavigationMenu.List>
</NavigationMenu.Root>;

active marks the current page with aria-current="page". Give Root an aria-label when the page has more than one navigation landmark.

Submenus

NavigationMenu.Trigger opens the item’s Content in a shared popup. Add the Portal, Positioner, Popup, and Viewport parts once, after the List.

Code
submenu.tsx 
import {NavigationMenu, Stack} from '@earendil-works/elanor-react';

export default function NavigationMenuSubmenu() {
  return (
    <NavigationMenu.Root aria-label="Main">
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#" active>
            Overview
          </NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>
            Resources
            <NavigationMenu.Icon />
          </NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <Stack gap="xxSmall">
              <NavigationMenu.Link href="#">Guides</NavigationMenu.Link>
              <NavigationMenu.Link href="#">Changelog</NavigationMenu.Link>
              <NavigationMenu.Link href="#">Support</NavigationMenu.Link>
            </Stack>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
      </NavigationMenu.List>
      <NavigationMenu.Portal>
        <NavigationMenu.Positioner align="start">
          <NavigationMenu.Popup>
            <NavigationMenu.Viewport />
          </NavigationMenu.Popup>
        </NavigationMenu.Positioner>
      </NavigationMenu.Portal>
    </NavigationMenu.Root>
  );
}

API

NavigationMenu.Root

PropTypeDefaultDescription
orientation'horizontal'-Only horizontal is supported.

Also accepts Base UI NavigationMenu.Root props.

NavigationMenu.List

Accepts Base UI NavigationMenu.List props.

NavigationMenu.Item

Accepts Base UI NavigationMenu.Item props.

NavigationMenu.Link

Accepts Base UI NavigationMenu.Link props.

NavigationMenu.Trigger

Accepts Base UI NavigationMenu.Trigger props.

NavigationMenu.Icon

Accepts Base UI NavigationMenu.Icon props.

NavigationMenu.Content

Accepts Base UI NavigationMenu.Content props.

NavigationMenu.Positioner

Accepts Base UI NavigationMenu.Positioner props.

NavigationMenu.Viewport

Accepts Base UI NavigationMenu.Viewport props.

NavigationMenu.Popup

Accepts Base UI NavigationMenu.Popup props.

NavigationMenu.Portal

Accepts Base UI NavigationMenu.Portal props.

↑↓to select↵to openEscto close