SideNav Props

Name	Type	Default	Description
label	string	Localized “Sidebar”	Accessible name of the navigation landmark.
collapsible	boolean | SideNavCollapsible	false	Allows the icon rail. An object can set the initial state, the built-in button, and a hotkey.
isCollapsed	boolean	-	Controlled collapsed state for v-model:is-collapsed.
resizable	boolean | SideNavResizable	false	Drag the trailing edge. An object can set the starting, minimum, and maximum widths, and an autoSaveId that remembers the width.
handleRef	HandleRef<SideNavHandle>	-	A button outside the bar can collapse, expand, and toggle. Sharing v-model:is-collapsed is the usual approach.

SideNav events

Name	Description
update:isCollapsed	Collapsed state change for v-model:is-collapsed.
collapsedChange	Fired whenever the collapsed state changes.
widthChange	Fired while dragging, with the width in pixels.

SideNav slots

Name	Description
default	Main navigation, usually sections and items.
header	Brand block at the top.
top	Extra content under the brand block.
footer	Footer content, above the collapse button.
footerIcons	Icons on the same row as the collapse button.

SideNavSection Props

Name	Type	Default	Description
title	string	-	Group title. Stays available to assistive tech when collapsed.
subtitle	string	-	Supporting line under the title.
isHeaderHidden	boolean	false	Hides the title visually.

SideNavItem Props

Name	Type	Default	Description
label	string	-	Item name.
href	string	-	Destination. With children, the label navigates and the chevron collapses.
as	NavLinkComponent	'a'	Link root.
iconClass	string	-	CSS icon class. Items without an icon are omitted while collapsed.
isSelected	boolean	false	Current page.
isDisabled	boolean	false	Disables the item.
collapsible	boolean | object	-	Whether children can collapse. false keeps them open.

SideNavItem slots

Name	Description
default	Child items.
icon	Icon before the label.
selectedIcon	Icon shown while the item is selected.
end	Content at the end of the primary control, still inside the link or button.
actions	Controls beside the primary control, such as an icon button. They stay outside the link and are omitted while the rail is collapsed.

SideNavHeading Props

Name	Type	Default	Description
heading	string	-	Product or app name.
headingHref	string	-	Link for the main title.
superheading	string	-	Small line above the title.
superheadingHref	string	-	Link for the line above the title.
subheading	string	-	Small line below the title.
subheadingHref	string	-	Link for the line below the title.
logoLabel	string	-	Accessible name when the logo is a link on its own. Falls back to heading.
as	NavLinkComponent	'a'	Link root.

SideNavHeading slots

Name	Description
icon	Mark in front of the title. This is all that remains while collapsed.
end	Trailing content on the title row.
menu	Popup menu, usually a NavHeadingMenu. The scope provides close and focusRequest.

SideNavCollapseButton Props

Toggles the rail between its expanded and collapsed states. Inside a SideNav it reads the collapse state from the sidebar; outside one, bind it with v-model:is-collapsed.

Name	Type	Default	Description
label	string	-	Button text. With a label the button renders the chevron plus the text; without one it is icon only and the translated “Collapse sidebar” / “Expand sidebar” becomes its accessible name.
collapsible	SideNavControlledCollapsible	-	Controlled { isCollapsed, onCollapsedChange } config, for buttons rendered outside the sidebar. Pass the same object to SideNav. It wins over isCollapsed.
isCollapsed	boolean	-	Controlled collapsed state for v-model:is-collapsed, for buttons rendered outside the sidebar.
size	'sm' | 'md' | 'lg'	Container: sm in a SideNav, otherwise md	Button size. Set it when the button sits outside a sized container and has to match its neighbours.

SideNavCollapseButton slots

Name	Description
default	Custom content for the button's icon slot. Replaces the chevron; the visible text still comes from label.