Navigation

Navigation system with two components: NavigationBar (container) and NavigationButton (items). Supports vertical/horizontal layout, animated active indicators, and start/end slot props for non-button content.

Import

import { NavigationBar, NavigationButton } from 'reablocks';

NavigationBar Props

The outer element is a <nav> with role="navigation".

NavigationButton Props

Vertical Navigation (Default)

<NavigationBar
  direction="vertical"
  start={<Logo />}
  end={<UserMenu />}
>
  <NavigationButton active onClick={() => navigate('/')}>
    <HomeIcon /> Home
  </NavigationButton>
  <NavigationButton onClick={() => navigate('/settings')}>
    <SettingsIcon /> Settings
  </NavigationButton>
</NavigationBar>

Horizontal Navigation

<NavigationBar direction="horizontal">
  <NavigationButton variant="underline" active>Home</NavigationButton>
  <NavigationButton variant="underline">About</NavigationButton>
  <NavigationButton variant="underline">Contact</NavigationButton>
</NavigationBar>

Scoping the active indicator

When multiple NavigationBars are on the same page, set animationLayoutId so the active highlight does not animate across instances:

<NavigationBar>
  <NavigationButton active animationLayoutId="primary-nav">Home</NavigationButton>
  <NavigationButton animationLayoutId="primary-nav">Docs</NavigationButton>
</NavigationBar>

Button Variants

• ghost — Background highlight on hover/active, rounded selection indicator behind the content
• underline — Bottom border indicator on active, no background

Variants are extensible — add new keys via theme customization, then pass variant="myVariant".

NavigationTheme Interface

interface NavigationButtonVariantConfigTheme {
  content: string;     // Button content styling
  active: string;      // Active state classes
  selection: string;   // Selection indicator (animated layoutId target)
  disabled: string;    // Disabled state classes
}

interface NavigationTheme {
  bar: {
    base: string;                                   // Outer nav (flex, padding, border, bg)
    direction: { horizontal: string; vertical: string };
    start: string;                                  // Start slot wrapper
    navigation: string;                             // Main nav area (flex-1, gap)
    end: string;                                    // End slot wrapper
  };
  button: {
    base: string;                                   // Wrapper around the motion button
    variant: {
      ghost: NavigationButtonVariantConfigTheme;
      underline: NavigationButtonVariantConfigTheme;
      [key: string]: NavigationButtonVariantConfigTheme;
    };
  };
}

The variant map is open — extend it through extendTheme to register custom variants.