<tyro-ui-navbar>
Navbar
Main navigation bar shared across all Tyrolium projects. Handles the app menu, search, language, theme, connected user and mobile burger.
Preview - standalone
project="Tyrolium"
Preview - sidebar mode
project="Useritium" subtitle="Dashboard" [sidebar]="true"
Inputs
Property | Type | Default | Description |
|---|---|---|---|
[project] | string | '' | Project name displayed in the navbar (e.g. "Tyrolium", "Useritium") |
[logo] | string | '' | Logo URL displayed on the left - if empty, no logo is shown |
[subtitle] | string | '' | Utility label displayed below the project name in sidebar mode (e.g. "Dashboard") |
[pages] | ITyroUiNavbarPages[] | [] | Navigation links displayed in the bar (see interface below) |
[placeholder] | boolean | true | Renders an empty block below the navbar to compensate for its position: fixed |
[sidebar] | boolean | false | Dashboard mode - switches the navbar to position: relative and shows a burger button that emits sidebarBurgerClick |
[currentUser] | any[] | [] | Use TyroUiAuthService instead |
Outputs
Event | Payload | Description |
|---|---|---|
(sidebarBurgerClick) | void | Emitted when the burger is clicked in [sidebar]="true" mode - used by tyro-ui-dashboard-layout to open the mobile sidebar |
(loginClick) | void | Emitted after the login modal opens (for external use) |
(registerClick) | void | Emitted after the register modal opens |
(logoutClick) | void | Emitted after logout via TyroUiAuthService.logout() |
Interface - ITyroUiNavbarPages
Navigation links passed via [pages]
Field | Type | Description |
|---|---|---|
label | string | Displayed text (fr) |
labelEn? | string | Displayed text (en) |
link? | string | Angular route (routerLink) |
href? | string | External link (window.location.href) |
ancre? | string | ID of the element to scroll to |
ancreHost? | string | Host domain for cross-domain scroll |
icon? | string | Remix-icon class |
children? | ITyroUiNavbarPages[] | Sub-links (dropdown) |
childrenOpen? | boolean | Dropdown open/closed state |
Config - menu-navbar.ts
NavbarMenuPinned - pinned app (Tyrolium)
The "apps" menu is powered by two constants exported from menu-navbar.ts, auto-imported by the component.
Field | Type | Description |
|---|---|---|
name | string | Displayed name |
nameEn? | string | English name |
description | string | Subtitle (fr) |
descriptionEn? | string | Subtitle (en) |
image? | string | Color logo URL |
imageLight? | string | Dark mode logo URL |
icon? | string | Remix-icon class (if no image) |
link | string | Destination URL |
host? | string | Host domain for relative links |
subItems? | ITyroUiNavbarMenuItem[] | Sub-entries (level 2) |
subOpen? | boolean | Sub-entries open state |
isSubItem? | boolean | Visually marks as a sub-item |
NavbarMenuCategory - app menu categories
Field | Type | Description |
|---|---|---|
label | string | Category title (fr) |
labelEn? | string | Category title (en) |
open | boolean | Category expanded by default |
items | ITyroUiNavbarMenuItem[] | List of apps in this category |
Current categoriesSubsidiaries (open: true) Corporate (open: false) Service & Info (open: false) Internal (open: false)