NavRail

Animated navigation rail with tab-like selection.

Props

NavRailProps

Prop	Type	Default	Description
items	NavRailItem[]	Required	Navigation items
value	string	-	Controlled active item
defaultValue	string	-	Initial active item
onChange	(id: string) => void	-	Selection change handler
variant	'horizontal' | 'vertical' | 'responsive'	'horizontal'	Layout variant
mobileContent	'icons' | 'icons-text'	'icons-text'	Mobile display mode
animation	'bounce' | 'none'	'bounce'	Selection animation
size	'sm' | 'md' | 'lg'	'md'	Size variant
breakpoint	'md' | 'lg' | 'xl' | '2xl'	'md'	Responsive breakpoint
ariaLabel	string	-	Navigation aria-label
className	string	-	Container class

NavRailItem

Property	Type	Required	Description
id	string	Yes	Unique identifier
icon	ReactNode	Yes	Item icon
label	string	Yes	Item label
to	string	No	Route path
badge	number | ReactNode	No	Badge indicator
disabled	boolean	No	Disable item

Example

<NavRail
  items={[
    { id: 'home', icon: <Home />, label: 'Home', to: '/' },
    { id: 'users', icon: <Users />, label: 'Users', to: '/users' },
  ]}
  ariaLabel="Main navigation"
/>

See also

• NavRail (Conceptual)