Navigation

Overview

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

Demo

Select Variant

Props

Property	Description	Type	Values	Default	Required
variant	Theme variant for the navigation menu	NavigationVariant \| undefined	"light" \| "dark" \| "blue"	"light"
navItems	Array of navigation items	NavigationItem[] \| undefined	NavigationItem[] \| undefined
logoLink	Link for the logo	string \| undefined	string \| undefined
logoUrl	Change the logo url. Helpful for cobranded logos	string \| undefined	string \| undefined
showSearchInput	Show or hide the search input	boolean \| undefined	boolean \| undefined
searchPlaceholder	Custom placeholder value for the search input	string \| undefined	string \| undefined	"Search"
showPrimaryButton	Show or hide the primary button	boolean \| undefined	boolean \| undefined
primaryButton	Label and link for the primary button	NavigationAction \| undefined	{ label: string path: string }
showSecondaryButton	Show or hide the secondary button	boolean \| undefined	boolean \| undefined
secondaryButton	Label and link for the secondary button	NavigationAction \| undefined	{ label: string path: string }
showAccountIcon	Show or hide the account icon	boolean \| undefined	boolean \| undefined
showSearchIcon	Show or hide the search icon	boolean \| undefined	boolean \| undefined
search		string \| null \| undefined	string \| null \| undefined

Events

Name	Return Type
update:search	[value: string \| null \| undefined]