UiSvelte

SideNav

Side navigation components provide a vertical menu for navigating between different sections of an application.

Preview

The component accepts the following props:

Prop	Type	Default
Title Description Error No data There are no records to display

NavItem Type

Each item in the items array should follow this structure:

The component accepts the following props:

Prop	Type	Default
Title Description Error No data There are no records to display

SubmenuItem Type

Each subitem in the subitems array should follow this structure:

The component accepts the following props:

Prop	Type	Default
Title Description Error No data There are no records to display

Item Types

item - Standard navigation item with optional icon, description, and status
divider - Visual separator between groups of items
header - Section header to organize navigation groups
submenu - Collapsible menu containing nested navigation items

Layout Variants

isWide - Makes the navigation take full width of its container
isCompact - Reduces padding for a more condensed layout
isCollapsible - Creates a collapsible sidebar that expands on hover (64px collapsed, 256px expanded)

Features

Automatic active state detection based on current route
Collapsible submenus with smooth slide transitions
Support for icons, descriptions, and status badges
Hover-to-expand functionality with isCollapsible
Three color variants: primary, secondary, and muted
Click handlers for custom navigation logic
Responsive sizing with sm, md, and lg options