Navigation Rail provide access to primary destinations in apps when using tablet and desktop screens.

NavRail without labels

NavRail with labels

Component props

Component
Name
Type
Description
NavigationRailheightStringSpecify height, default is h-screen
NavigationRailtopNodeSpecify the elements that is placed at the top
NavigationRailcenterNodeSpecify the elements that is placed at the center
NavigationRailbottomNodeSpecify the elements that is placed at the bottom
NavRailItemlabeltypeSpecify the text of the navigation rail item
NavRailItemonClickFunctionHandling click events
NavRailItemiconNodeSpecify an icon
NavRailItembadgeBooleanSpecify if there is a badge
NavRailItembadgeColortypeSpecify badge color
NavRailItembadgeCounttypeSpecify badge count