Skip to content

SiNavbarPrimaryComponent documentation

selector
si-navbar-primary

Deprecated: Use the new si-application-header instead.

Input Properties

NameTypeDefaultDescription
account
AccountItemAccount settings name ( title ) and profile picture ( image or icon )
accountItems
MenuItem[]List of account dropdown elements (defined by title and link ).

The menu item can have submenu items (supplying items : MenuItem[]). Submenu items can be divided into groups by separators. A separator is an item with only '-' set as title .

Alternatively, you can can create a custom content by putting your html code between the tags. In this case you don't need this property (will be ignored if you set anyway).
MenuItem"all apps" link in the launchpad
appCategoryItems
AppItemCategory[]Like appItems but with the addition of categories. If this is set, appItems is ignored.
appItems
AppItem[]All app items shown in the launchpad. The launchpad will not be visible if the app items are undefined. The launchpad will be visible if the app items are an empty array.
appItemsFavorites
booleanfalseAllow the user to favorite apps which will then be displayed at the top.
appSwitcherSubTitle
TranslatableString$localize`:@@SI_LAUNCHPAD.SUB_TITLE:Access all your apps`sub-title for the launchpad
appSwitcherTitle
TranslatableString$localize`:@@SI_LAUNCHPAD.TITLE:Launchpad`title for the launchpad
appTitle
stringTitle of the application.
ariaLabelMainMenu
string'Header main'Aria label for the main menu landmark
ariaLabelSecondaryMenu
string'Header secondary'Aria label for the secondary menu landmark
closeAppSwitcherText
TranslatableString$localize`:@@SI_LAUNCHPAD.CLOSE:Close launchpad`Text to close the launchpad. Needed for a11y.
defaultAppsTitle
TranslatableString$localize`:@@SI_LAUNCHPAD.DEFAULT_CATEGORY_TITLE:Apps`Title or translate key for the default apps section.
favoriteAppsTitle
TranslatableString$localize`:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorite apps`Title or translate key for the favorite apps section.
focusOnLoad
booleanfalseSpecifies whether the component should automatically be focused as soon as it is loaded.
home
(undefined | Link){ link: '/' }Configurable home link that is used at the logo and app title. Use undefined to disable the link.
logoUrl
stringURL of the navbar brand.
navAriaLabel
string'Primary'Marks the navbar as primary navigation element. Needed for a11y (screen reader). Only one element should be primary. If multiple navbars are used, it's up to the user of the components to label them in the correct order.
openAppSwitcherText
TranslatableString$localize`:@@SI_NAVBAR.OPEN_LAUNCHPAD:Open launchpad`Text for the launchpad icon. Needed for a11y.
primaryItems
MenuItem[][]List of navbar items which should be displayed at the left (in LTR) side next to the banner.
showLessAppsTitle
TranslatableString$localize`:@@SI_LAUNCHPAD.SHOW_LESS:Show less`Title or translate key for the show less apps button.
showMoreAppsTitle
TranslatableString$localize`:@@SI_LAUNCHPAD.SHOW_MORE:Show more`Title or translate key for the show more apps button.
toggleNavigationText
TranslatableString$localize`:@@SI_NAVBAR.TOGGLE_NAVIGATION:Toggle navigation`Text or translate key for the toggle navigation icon. Needed for a11y.

Output Properties

NameTypeDescription
appItemFavoriteChanged
[ AppItem, boolean ]

Types Documentation

extends MenuItem
Deprecated: Use the new si-application-header instead.
Properties
A function that will be invoked when clicking on the menu item. When passed as a string, use together with SiLinkActionService to receive events. This is meant for repetitive things in lists/tables/etc.
action?: (string | (param: any) => any) from MenuItem.action
The status (success, info, warning, caution, danger, critical, pending, progress) to be visualized.
avatarStatus?: EntityStatusType
aria-label for avatar status
avatarStatusAriaLabel?: TranslatableString
Defines the content of the optional badge. Should be a number or something like "100+". if undefined or empty string, no badge is displayed
badge?: (string | number) from MenuItem.badge
Defines the background color of the badge. Default is specific to Element flavour.
badgeColor?: string from MenuItem.badgeColor
Show a dot badge without content?
badgeDot?: boolean from MenuItem.badgeDot
Defines the badge style
badgeStyle?: ("" | "inline" | "dot") from MenuItem.badgeStyle
Name of the Company
company?: string
Defines if custom content is chosen in account dropdown (otherwise accountItems are used)
customContent?: boolean from MenuItem.customContent
A boolean that lets the link know whether it is disabled or not.
disabled?: boolean from MenuItem.disabled
Whether the menu items sub-menu should open upwards instead of downwards.
dropUpwards?: boolean from MenuItem.dropUpwards
Email address of the user
email?: string
If the menu item has children you can specify if they are visible or not.
expanded?: boolean from MenuItem.expanded
Defines a href URI that the menu item will be linked to. Will be used to set the href attribute of the a element. Will only be used if link and function is not set.
href?: string from MenuItem.href
The web font icon class name (e.g. element-settings-outline).
icon?: string from MenuItem.icon
Defines if only the icon is shown in the default navigation bar.
iconOnly?: boolean from MenuItem.iconOnly
An optional id to uniquely identify the menu item.
id?: string from MenuItem.id
The value for an image src tag. Maybe a relative or absolute link to an jpg or gif image.
image?: string from MenuItem.image
Initials to be displayed as avatar if no icon and also no image are provided. If also no initials are provided, they will be automatically calculated from the title .
initials?: string
A boolean that lets the link know whether it is active or not. It is useful when action() is executed instead of link route.
isActive?: boolean from MenuItem.isActive
Whether the menu item should be displayed as a heading/title, will also disable links and actions.
isHeading?: boolean from MenuItem.isHeading
A navigation bar item can have a sub-menu, if these items are set. They define the sub-menu content.
items?: MenuItem[] from MenuItem.items
The navigation extras provide additional routing options when using the router link.
navigationExtras?: NavigationExtras from MenuItem.navigationExtras
Role name shown as a badge in the bottom
role?: string
For single/multi choice items: the kind of icon to show.
selectionState?: ("" | "check" | "radio") from MenuItem.selectionState
The target attribute specifies where to open the linked document. If no target is specified, the link will open in the current tab.
target?: string from MenuItem.target
Full name of user
title: string
The optional tooltip of the link. Can be either the text to be displayed or the translation key.
tooltip?: TranslatableString from MenuItem.tooltip
Type to distinguish between check and radio menu items. Needs to be set for correct interaction and used for a11y.
type?: ("check" | "radio") from MenuItem.type
The AppItemCategory is used to show app categories in the launchpad.
Deprecated: Use the new si-application-header instead.
Properties
The name of the app category. Can be a translation key.
category?: TranslatableString
The apps to show under this category.
items: AppItem[]
extends MenuItem
The AppItem is used to show apps in the launchpad.
Deprecated: Use the new si-application-header instead.
Properties
A function that will be invoked when clicking on the menu item. When passed as a string, use together with SiLinkActionService to receive events. This is meant for repetitive things in lists/tables/etc.
action?: (string | (param: any) => any) from MenuItem.action
Defines the content of the optional badge. Should be a number or something like "100+". if undefined or empty string, no badge is displayed
badge?: (string | number) from MenuItem.badge
Defines the background color of the badge. Default is specific to Element flavour.
badgeColor?: string from MenuItem.badgeColor
Show a dot badge without content?
badgeDot?: boolean from MenuItem.badgeDot
Defines the badge style
badgeStyle?: ("" | "inline" | "dot") from MenuItem.badgeStyle
Defines if custom content is chosen in account dropdown (otherwise accountItems are used)
customContent?: boolean from MenuItem.customContent
A boolean that lets the link know whether it is disabled or not.
disabled?: boolean from MenuItem.disabled
Whether the menu items sub-menu should open upwards instead of downwards.
dropUpwards?: boolean from MenuItem.dropUpwards
If the menu item has children you can specify if they are visible or not.
expanded?: boolean from MenuItem.expanded
Defines a href URI that the menu item will be linked to. Will be used to set the href attribute of the a element. Will only be used if link and function is not set.
href?: string from MenuItem.href
The web font icon class name (e.g. element-settings-outline).
icon?: string from MenuItem.icon
Defines if only the icon is shown in the default navigation bar.
iconOnly?: boolean from MenuItem.iconOnly
An optional id to uniquely identify the menu item.
id?: string from MenuItem.id
The value for an image src tag. Maybe a relative or absolute link to an jpg or gif image.
image?: string from MenuItem.image
A boolean that lets the link know whether it is active or not. It is useful when action() is executed instead of link route.
isActive?: boolean from MenuItem.isActive
If true , the app is marked as an external application opening in a new browser tab.
isExternal?: boolean
If true , the app is marked as a favorite.
isFavorite?: boolean
Whether the menu item should be displayed as a heading/title, will also disable links and actions.
isHeading?: boolean from MenuItem.isHeading
A navigation bar item can have a sub-menu, if these items are set. They define the sub-menu content.
items?: MenuItem[] from MenuItem.items
The navigation extras provide additional routing options when using the router link.
navigationExtras?: NavigationExtras from MenuItem.navigationExtras
For single/multi choice items: the kind of icon to show.
selectionState?: ("" | "check" | "radio") from MenuItem.selectionState
The target attribute specifies where to open the linked document. If no target is specified, the link will open in the current tab.
target?: string from MenuItem.target
The title of the menu item. Can be either the title to be displayed or the translation key.
title?: TranslatableString from MenuItem.title
The optional tooltip of the link. Can be either the text to be displayed or the translation key.
tooltip?: TranslatableString from MenuItem.tooltip
Type to distinguish between check and radio menu items. Needs to be set for correct interaction and used for a11y.
type?: ("check" | "radio") from MenuItem.type
(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.
Translatable
import
(ExtendedStatusType | "pending" | "progress")
(StatusType | "unknown")
("success" | "info" | "warning" | "danger" | "caution" | "critical")

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