SidebarNav

A vertical sidebar navigation component with collapsible functionality and optional icons. It supports main navigation items, bottom‑pinned items, dropdown children, and role‑based visibility, making it suitable for dashboards, admin panels, and applications with many navigation options.

Use Cases

• Admin dashboards with multiple sections
• Multi-section apps requiring hierarchical navigation
• Apps with 8 + navigation items
• Data‑heavy interfaces where horizontal space is valuable
• Role‑based admin panels with many menu options

Properties

brandText

Brand/company name displayed at top of sidebar. Type: string.

brandIcon

Lucide icon for brand logo at top of sidebar. Type: string.

brandHref

External URL or anchor for brand link. Type: string.

brandTargetPage

Target page slug for brand navigation. Type: string. Default: home

variant

Visual style variant. Type: string. Options: light, dark, glass. Default: light. Tip: Use ‘dark’ for admin panels, ‘light’ for standard apps, and ‘glass’ for a premium frosted‑glass look.

width

Sidebar width when expanded. Type: string. Options: narrow, medium, wide. Default: medium. Visual Impact: narrow — 60px (icon‑only), medium — 240px (standard with icons and labels), wide — 280px (spacious with longer labels).

position

Which side of screen to position sidebar. Type: string. Options: left, right. Default: left

collapsible

Whether the sidebar CAN be collapsed by the user (shows toggle button). Type: boolean. Default: true

defaultCollapsed

Whether the sidebar STARTS in collapsed state (icons only). Only relevant when collapsible=true. Type: boolean. Default: false. Tip: Use false on desktop for better discoverability; use true on small screens to save space.

showLabelsWhenCollapsed

Show labels as tooltips on hover when sidebar is collapsed. Type: boolean. Default: false

items

Main sidebar navigation items. Each item can have an icon, label, link, and optional dropdown children. Type: array. Recommendations: Add icon to every item; typical count is 6‑15 items.

bottomItems

Items pinned to the BOTTOM of the sidebar (e.g., Settings, Help, Profile). Same structure as items. Type: array. Recommendation: Common bottom items include Settings, Help, Profile, Logout.

showAuthButton

Show login/logout button at bottom of sidebar. Type: boolean. Default: false

loginButtonText

Text for the login button. Type: string. Default: Sign In

showCartIcon

Show shopping cart icon with badge count. Type: boolean. Default: false

cartTargetPage

Target page slug for cart icon click. Type: string.

customCss

Custom CSS for styling. Type: string.

Best Practices

• Use for apps with 6 + navigation items (more than typical navbar can handle)
• Include icons with each item for visual recognition
• Use collapsible=true to allow users to toggle sidebar width
• Use bottomItems for Settings, Help, Profile links pinned to bottom
• Position='left' is standard for most apps
• Use variant='dark' for admin panels, 'glass' for premium look
• Add visibleToRoles on admin‑only items
• Use children for grouping related sub‑items in dropdowns