SideNavItem

Description #

A navigation item to be used within <vaadin-side-nav>. Represents a navigation target. Not intended to be used separately.

<vaadin-side-nav-item>
  Item 1
  <vaadin-side-nav-item path="/path1" slot="children">
    Child item 1
  </vaadin-side-nav-item>
  <vaadin-side-nav-item path="/path2" slot="children">
    Child item 2
  </vaadin-side-nav-item>
</vaadin-side-nav-item>

Customization #

You can configure the item by using slot names.

Slot name	Description
prefix	A slot for content before the label (e.g. an icon).
suffix	A slot for content after the label (e.g. an icon).

Example #

<vaadin-side-nav-item>
  <vaadin-icon icon="vaadin:chart" slot="prefix"></vaadin-icon>
  Item
  <span theme="badge primary" slot="suffix">Suffix</span>
</vaadin-side-nav-item>

Styling #

The following shadow DOM parts are available for styling:

Part name	Description
content	The element that wraps link and toggle button
children	The element that wraps child items
link	The clickable anchor used for navigation
toggle-button	The toggle button

The following state attributes are available for styling:

Attribute	Description
disabled	Set when the element is disabled.
expanded	Set when the element is expanded.
has-children	Set when the element has child items.

See Styling Components documentation.

Properties #

current #

Type: boolean

Whether the item's path matches the current browser URL.

A match occurs when both share the same base origin (like https://example.com), the same path (like /path/to/page), and the browser URL contains at least all the query parameters with the same values from the item's path.

See matchNested for how to change the path matching behavior.

The state is updated when the item is added to the DOM or when the browser navigates to a new page.

disabled #

Type: boolean

If true, the user cannot interact with this element.

expanded #

Type: boolean

Whether to show the child items or not

i18n #

Type: SideNavI18n

The object used to localize this component. To change the default localization, replace this with an object that provides all properties, or just the individual properties you want to change.

The object has the following structure and default values:

{
  toggle: 'Toggle child items'
}

See also: SideNavI18n

matchNested #

Type: boolean

Whether to also match nested paths / routes. false by default.

When enabled, an item with the path /path is considered current when the browser URL is /path, /path/child, /path/child/grandchild, etc.

Note that this only affects matching of the URLs path, not the base origin or query parameters.

path #

Type: string | null | undefined

The path to navigate to

pathAliases #

Type: string[]

The list of alternative paths matching this item

routerIgnore #

Type: boolean

Whether to exclude the item from client-side routing. When enabled, this causes the item to behave like a regular anchor, causing a full page reload. This only works with supported routers, such as the one provided in Vaadin apps, or when using the side nav onNavigate hook.

target #

Type: string | null | undefined

The target of the link. Works only when path is set.

Events #

expanded-changed #

Type: SideNavItemExpandedChangedEvent

Fired when the expanded property changes.

Types #

SideNavI18n #

export interface SideNavI18n {
  toggle?: string;
}

SideNavItemExpandedChangedEvent #

/**
 * Fired when the `expanded` property changes.
 */
export type SideNavItemExpandedChangedEvent = CustomEvent<{ value: boolean }>;