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

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.