Balance Logo
Balance
Reckon Design System

Sidebar Navigation

Provides components and utilities to help users navigate through the app.
Install
pnpm add @reckon-web/sidebar-navigation
Import usage
import {
SidebarNavigation,
SidebarNavigationItem,
SidebarNavigationItemButton,
SidebarNavigationGroup
} from '@reckon-web/sidebar-navigation';
  • Code
  • API

Use navigation to let users navigate to the major areas of your site.

Usage

SidebarNavigationItem is a link used to take users to different parts of your application. The links should represent different areas of your applications, do not use this package for navigating a list of items such as Users.

NOTE: SidebarNavigationItem must be used inside SidebarNavigation.

Edit in Playroom

SidebarNavigationItemButton is used to perform a task from the navigation area which may or may not result the user being navigated to a different area of your application. It is usually used in the footer for actions like logout.

NOTE: SidebarNavigationItemButton must be used inside SidebarNavigation.

SidebarNavigationGroup is a logical grouping of navigation items and buttons to make navigation more convenient for the user.

NOTE:

  • SidebarNavigationGroup must be used inside SidebarNavigation.
  • Nesting navigation groups inside navigation groups is not supported.

Highlighting a selected route and controlling navigation group expanded/collapsed state

The selectedNavigationKey prop on SidebarNavigation is used to highlight the currently selected route by matching the navigationKey prop on SidebarNavigationItem.

The defaultExpandedGroupKey prop on SidebarNavigation is used to expand a navigation group by default by matching the groupKey prop on SidebarNavigationGroup. This prop is only used once on mount, after that the user is free to interact with the navigation groups. A change in this prop will not result in a navigation group expanding/collapsing, that would be terrible UX.

Patterns

Complete side bar navigation

Sample code for putting together a side bar navigation panel with header, body and footer.

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo