Skip to content

NavbarVerticalItem Type documentation

(NavbarVerticalItemGroup | NavbarVerticalItemRouterLink | NavbarVerticalItemLink | NavbarVerticalItemAction | NavbarVerticalItemHeader | NavbarVerticalItemDivider)
Union type for all possible all items in the navbar.

Types Documentation

extends NavbarVerticalItemBase
Use this type to create a group that can hold multiple items.
Properties
Badge that is rendered after the label or as a red dot in the collapsed state.
badge?: (string | number) from badge
Color of the badge. Use any color shown here https://element.siemens.io/components/status-notifications/badges/#example without bg- prefix.
badgeColor?: string from badgeColor
Submenu items for this menu item.
children: NavbarVerticalSubItem[]
Set this property if the item should be expanded by default.
expanded?: boolean
Hide badge when navbar is collapsed. By default, badges are always visible (both expanded and collapsed).
hideBadgeWhenCollapsed?: boolean from hideBadgeWhenCollapsed
Optional icon that will be rendered before the label.
icon?: string from icon
The ID is required if the navbar is used with UIState.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "group"
extends NavbarVerticalItemBase
AVOID USING THIS TYPE! Actions inside the navbar are an indication for a code smell.

Use NavbarVerticalItemRouterLink instead whenever possible.
Properties
Action that is called when the navbar item is triggered.
action: (source: this) => void
The active state of the item. Note: It must be set manually.
active?: boolean
Badge that is rendered after the label or as a red dot in the collapsed state.
badge?: (string | number) from badge
Color of the badge. Use any color shown here https://element.siemens.io/components/status-notifications/badges/#example without bg- prefix.
badgeColor?: string from badgeColor
Hide badge when navbar is collapsed. By default, badges are always visible (both expanded and collapsed).
hideBadgeWhenCollapsed?: boolean from hideBadgeWhenCollapsed
Optional icon that will be rendered before the label.
icon?: string from icon
The ID is required if the navbar is used with UIState.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "action"
Properties
label: TranslatableString
type: "header"
Properties
type: "divider"
Common properties shared among navbar item types.
Properties
Badge that is rendered after the label or as a red dot in the collapsed state.
badge?: (string | number)
Color of the badge. Use any color shown here https://element.siemens.io/components/status-notifications/badges/#example without bg- prefix.
badgeColor?: string
Hide badge when navbar is collapsed. By default, badges are always visible (both expanded and collapsed).
hideBadgeWhenCollapsed?: boolean
Optional icon that will be rendered before the label.
icon?: string
The ID is required if the navbar is used with UIState.
id?: string
Label that is shown to the user.
label: TranslatableString
(string | number)
Property
Badge that is rendered after the label or as a red dot in the collapsed state.
string
Property
Color of the badge. Use any color shown here https://element.siemens.io/components/status-notifications/badges/#example without bg- prefix.
(NavbarVerticalItemRouterLink | NavbarVerticalItemLink | NavbarVerticalItemAction)
Union type for all items that can be wrapped in a group.
boolean
Property
Hide badge when navbar is collapsed. By default, badges are always visible (both expanded and collapsed).
string
Property
Optional icon that will be rendered before the label.
string
Property
The ID is required if the navbar is used with UIState.
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
TranslatableString
Property
Label that is shown to the user.
Translatable
import

Except where otherwise noted, content on this site is licensed under MIT License.