Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
Components Navigation

Navigation

 Overview API Examples Style Tokens

LmnNavigationBarComponent

import { LmnNavigationBarComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-navigation-tablist lmn-navigation-links
Implements:OnChangesAfterViewInitOnDestroy

Properties

NameTypeDescription
activeItem
r
ModelSignal<string | undefined>
changeItem
r
OutputEmitterRef<LmnNavigationBarChangeItemEvent>
items
r
Signal<readonly LmnNavigationItemComponent[]>
itemsContainer
r
Signal<ElementRef<any>>
lmnKeyboardNavigationManager
r
Signal<LmnKeyboardNavigationManagerDirective>
nativeElement
r
HTMLElement
navigateBackwardControl
r
Signal<ElementRef<any>>
navigateForwardControl
r
Signal<ElementRef<any>>
negative
r
InputSignalWithTransform<boolean, unknown>
nextButtonTooltip
r
InputSignal<string | undefined>
previousButtonTooltip
r
InputSignal<string | undefined>
role
string

Methods

checkIfTranslationNeeded()

Checks if translation is needed based on the active item's name.

Notes

This method is intended to be called by child components LmnTabItemComponent, to determine if a translation of the navigation bar is needed based on the active item's position.

Presentation
checkIfTranslationNeeded(elementRef: HTMLElement | ElementRef<any>): void;
Parameters
NameTypeDescription
elementRef
HTMLElement | ElementRef<any>

@param {ElementRef} elementRef - The active element

Returns
void

goToNextChunk()

Navigate to the next chunk in the navigation bar.

Presentation
goToNextChunk(): void;
Returns
void

goToPreviousChunk()

Navigate to the previous chunk in the navigation bar.

Presentation
goToPreviousChunk(): void;
Returns
void

requestToActivateItem()

Requests the activation of a navigation item.

Notes

This method creates a Subject to check if activation can proceed and emits an event to activate the item.

Presentation
requestToActivateItem(activeItem: string): void;
Parameters
NameTypeDescription
activeItem
string

@param {string} activeItem - The name of the item to be activated.

Returns
void

LmnNavigationItemComponent

import { LmnNavigationItemComponent } from '@elemental/ui';
Decorators:@Component
Selectors:lmn-navigation-item a[lmn-navigation-item]
Implements:OnInitOnChanges

Properties

NameTypeDescription
disabled
r
InputSignalWithTransform<boolean, unknown>
disabledMarker
r
InputSignal<string | undefined>
label
r
InputSignal<string | undefined>
name
r
InputSignal<string>
nativeElement
r
HTMLElement
notificationsAttrAriaLabelPlural
r
InputSignal<string>
notificationsAttrAriaLabelSingular
r
InputSignal<string>
notificationsCount
r
InputSignal<number | undefined>
triggerRef
r
InputSignal<HTMLElement | undefined>

Accessors

get active

No documentation has been provided.

Presentation
get active(): boolean;
Type

boolean

get focused

No documentation has been provided.

Presentation
get focused(): boolean;
Type

boolean

set negative

No documentation has been provided.

Presentation
set negative(isNegative: boolean);
Type

boolean

Methods

activate()

Activates the navigation item, if not disabled, by making a request to the parent LmnNavigationBarComponent.

Notes

This method can be called externally, by an integrator

Presentation
activate(): void;
Returns
void

toggleActive()

Toggles the active state of the navigation item.

Notes

This method is called by the LmnNavigationBarComponent to toggle the active state of the item.

Presentation
toggleActive(value: boolean): void;
Parameters
NameTypeDescription
value
boolean

@param {boolean} value - The new value for the active state (true for active, false for inactive).

Returns
void

Previous
Modal Dialog
Next
Notification