Sidebar Navigation
Use navigation to let users navigate to the major areas of your site.
import { SidebarNavigation, SidebarNavigationItem, SidebarNavigationItemButton, SidebarNavigationGroup } from '@balance-web/sidebar-navigation';Usage
Navigation items
SidebarNavigationItem is a link used to take users to different parts of your application.
NOTE:
SidebarNavigationItemmust be used insideSidebarNavigation.
Navigation buttons
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.
NOTE:
SidebarNavigationItemButtonmust be used insideSidebarNavigation.
Navigation groups
SidebarNavigationGroup is a logical grouping of navigation items and buttons to make navigation more convenient for the user.
NOTE:
SidebarNavigationGroupmust be used insideSidebarNavigation.- 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.
Recipes
Complete side bar navigation
Sample code for putting together a side bar navigation panel with header, body and footer.