Navigation

The NavigationBar component renders a themed list of links for navigation. It was added in 10.0.0.

Quick Start

To start using the NavigationBar component, import it from reablocks.

import { NavigationBar, NavigationButton } from 'reablocks';


export default function App() {
return (
  <NavigationBar>
    <NavigationButton>
      Home
    </NavigationButton>
    <NavigationButton>
      Tickets
    </NavigationButton>
  </NavigationBar>
);
}

import { NavigationBar, NavigationButton } from 'reablocks';

export default function App() {
return (
  <NavigationBar>
    <NavigationButton>
      Home
    </NavigationButton>
    <NavigationButton>
      Tickets
    </NavigationButton>
  </NavigationBar>
);
}

API

NavigationBar

Name	Type	Default
`className`	`string` Custom class names for the navigation bar and its sections.
`classNameStart`	`string` Custom class names for the top section of the navigation bar.
`classNameNavigation`	`string` Custom class names for the navigation section.
`classNameEnd`	`string` Custom class names for the bottom section of the navigation bar.
`direction`	`keyof NavigationBarDirectionTheme` Direction of the navigation bar layout.	`'vertical'`
`start`	`ReactNode` Content to be displayed at the start of the navigation bar.
`end`	`ReactNode` Content to be displayed at the end of the navigation bar.
`theme`	`NavigationTheme` Theme overrides for the navigation bar.

NavigationButton

Name	Type	Default
`className`	`string` Custom class names for the navigation button.
`variant`	`keyof NavigationButtonVariantTheme` Variant of the navigation button.	`'ghost'`
`active`	`boolean` Indicates if the button is active.
`theme`	`NavigationTheme` Custom theme for the navigation button.
`disabled`	`boolean` Disables the button, preventing interaction.
`animated`	`boolean` If false, the animation of the button will be disabled.	`true`
`animationLayoutId`	`string` Unique identifier for the animation layout.
`onClick`	`() => void` Callback function to handle click events on the button.

Design and Usability Tips

Highlight Current Location: Always indicate the active item so users know where they are in the application.
Keep Labels Short: Aim for one or two words per item; long labels make scanning slow.