Skip to content

SiNavbarVerticalComponent documentation

selector
si-navbar-vertical

Input Properties

NameTypeDefaultDescription
collapsed
booleanfalseWhether the navbar-vertical is collapsed.
items
(MenuItem | NavbarVerticalItem)[][]List of vertical navigation items
navbarCollapseButtonText
TranslatableString$localize`:@@SI_NAVBAR_VERTICAL.COLLAPSE:Collapse`Text for the navbar collapse button. Required for a11y
navbarExpandButtonText
TranslatableString$localize`:@@SI_NAVBAR_VERTICAL.EXPAND:Expand`Text for the navbar expand button. Required for a11y
searchable
booleanfalseToggles search bar
searchPlaceholder
TranslatableString$localize`:@@SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER:Search ...`Placeholder text for search
skipLinkMainContentLabel
TranslatableString$localize`:@@SI_NAVBAR_VERTICAL.SKIP_LINK.MAIN_LABEL:Main content`Label for the skip link to main content
skipLinkNavigationLabel
TranslatableString$localize`:@@SI_NAVBAR_VERTICAL.SKIP_LINK.NAVIGATION_LABEL:Navigation`Label for the skip link to the vertical navbar
stateId
stringAn optional stateId to uniquely identify a component instance. Required for persistence of ui state.
textOnly
booleanfalseSet to true if there are no icons
visible
booleantrueSet to false to hide the vertical navbar
autoCollapseDelay
Deprecated		numberundefinedDeprecated: dropped without replacement.

Output Properties

NameTypeDescription
collapsedChange
booleanWhether the navbar-vertical is collapsed.
itemsChange
(MenuItem | NavbarVerticalItem)[]List of vertical navigation items
searchEvent
stringOutput for search bar input

Attributes and Methods

NameTypeDefaultDescription
collapse()
() => voidCollapses the vertical navbar.
expand()
() => voidExpands the vertical navbar.

Types Documentation

(NavbarVerticalItemGroup | NavbarVerticalItemRouterLink | NavbarVerticalItemLink | NavbarVerticalItemAction | NavbarVerticalItemHeader | NavbarVerticalItemDivider)
Union type for all possible all items in the navbar.
(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.
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
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
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"
Translatable
import
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
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
(NavbarVerticalItemRouterLink | NavbarVerticalItemLink | NavbarVerticalItemAction)
Union type for all items that can be wrapped in a group.

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