NavigationBar component

Accessibility

The NavigationBar component has been designed with accessibility in mind, providing semantic structure and menu button accessibility.

Accessibility Props

Name	Type	Description
openTitle	string	Sets the button’s accessible name. Default: “Open navigation menu”
menuButtonRef	React.RefObject	Reference to access the menu button for focus management
menuId	string	Links the button with its controlled drawer via aria-controls
menuExpanded	boolean	Controls the button’s aria-expanded state

Automatic Accessibility Features

Renders as a semantic <header> element, creating a native landmark
Menu button gets proper ARIA attributes:
- aria-haspopup="true" indicating it opens a menu
- aria-controls linking to the drawer when menuId is provided
- aria-expanded reflecting open/closed state when menuExpanded is provided
Focus handling works through the provided refs

Best Practices

Use descriptive openTitle text for the menu button
Ensure good contrast when using transparentBgAtTop
Add aria-label to <nav> elements inside the NavigationBar
For drawer/menu implementations:
- Move focus to the drawer when opened
- Trap focus within the drawer
- Return focus to the button when closed

Tab: Navigate to interactive elements
Enter/Space: Open the menu/drawer

Examples

Basic Example

<NavigationBar id="main-navigation" openTitle="Open navigation menu">
  <Stack as="nav" aria-label="Main site navigation">
    <LinkList direction="row">
      <TextLink href="/flights" iconLeft={<Airplane />}>
        Flights
      </TextLink>
      <TextLink href="/about">About</TextLink>
      <TextLink href="/contact">Contact</TextLink>
    </LinkList>
  </Stack>
</NavigationBar>

Screen reader announcements:

“Banner landmark” when encountering the navigation bar
“Main site navigation, navigation” for the nav element
“Open navigation menu, button” for the menu button
“Flights, link” for the first link

Focus Management Example

const App = () => {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [isDrawerOpen, setDrawerOpen] = useState(false);
  const drawerLabelId = "navigation-drawer-title";
  const handleDrawerOpen = () => setDrawerOpen(true);
  const handleDrawerClose = () => {
    setDrawerOpen(false);
    // Return focus to button when drawer closes
    if (buttonRef.current) buttonRef.current.focus();
  };
  return (
    <>
      <NavigationBar
        onMenuOpen={handleDrawerOpen}
        menuButtonRef={buttonRef}
        menuId="main-navigation-drawer"
        menuExpanded={isDrawerOpen}
      >
        {/* navigation content */}
      </NavigationBar>
      <Drawer
        id="main-navigation-drawer"
        shown={isDrawerOpen}
        onClose={handleDrawerClose}
        aria-labelledby={drawerLabelId}
      >
        <Stack direction="column">
          <h2 id={drawerLabelId}>Navigation Menu</h2>
          <TextLink>Home</TextLink>
          <TextLink>Products</TextLink>
          <TextLink>Contact</TextLink>
        </Stack>
      </Drawer>
    </>
  );
};

This pattern creates a fully accessible experience by:

Connecting the button and drawer with matching IDs
Communicating drawer state to screen readers
Managing focus properly for keyboard users

NavigationBar