Navbar — API · Koobiq

import { KbqNavbarModule } from '@koobiq/components/navbar';

Components

KbqNavbar

component

 @Component({ selector: 'kbq-navbar' })
class KbqNavbar extends KbqFocusableComponent {
    readonly ariaLabel = input<string | null>(null, {
        alias: 'aria-label'
    });
}

aria-labelinputCopy link to aria-labelstring | null: Accessible name of the navigation landmark. Set it whenever a page renders more than one navbar, so assistive technology can tell them apart.

KbqNavbarBrand

component

 @Component({
    selector: 'kbq-navbar-brand, [kbq-navbar-brand]',
    exportAs: 'kbqNavbarBrand'
})
class KbqNavbarBrand {
    readonly collapsedText = input<string>('');
    readonly tooltipDisabled = input<boolean | undefined>(undefined, {
        alias: 'kbqTooltipDisabled'
    });
    readonly ariaLabel = input<string | null>(null, {
        alias: 'aria-label'
    });
    get isLink(): boolean;
}

collapsedTextinputCopy link to collapsedTextstring: text that will be displayed in the tooltip. By default, the text is taken from kbq-navbar-title.
kbqTooltipDisabledinputCopy link to kbqTooltipDisabledboolean | undefined: Explicitly enables or disables the brand's tooltip.
Left unset, the tooltip is enabled exactly when the title cannot be read from the brand itself — the navbar is collapsed, the title is clipped, or there is no title at all.
aria-labelinputCopy link to aria-labelstring | null: Accessible name of the brand. Needed when the brand renders nothing but a logo.
isLinkCopy link to isLinkboolean: Whether the brand is rendered as a native link.

KbqNavbarItem

component

 @Component({
    selector: 'kbq-navbar-item, [kbq-navbar-item]',
    exportAs: 'kbqNavbarItem'
})
class KbqNavbarItem {
    readonly collapsedText = input<string>('');
    readonly collapsable = input<boolean>(true);
    readonly tooltipDisabled = input<boolean | undefined>(undefined, {
        alias: 'kbqTooltipDisabled'
    });
    readonly ariaLabel = input<string | null>(null, {
        alias: 'aria-label'
    });
    set collapsed(value: boolean);
    readonly isCollapsed: Signal<boolean>;
    get titleText(): string | null;
}

collapsedTextinputCopy link to collapsedTextstring: Text shown in the tooltip of a collapsed item. Defaults to the text of the projected kbq-navbar-title.
collapsableinputCopy link to collapsableboolean: Whether the item may be collapsed when the horizontal navbar runs out of room.
kbqTooltipDisabledinputCopy link to kbqTooltipDisabledboolean | undefined: Explicitly enables or disables the item's tooltip.
Left unset, the tooltip is enabled exactly when the title cannot be read from the item itself — the item is collapsed, its title is clipped, or it has no title at all.
aria-labelinputCopy link to aria-labelstring | null: Accessible name of the item. Needed for an icon-only item, which has no visible label of its own; an item that renders a title is named by it.
collapsedCopy link to collapsedboolean: Collapses the item regardless of what the ambient navbar decided.
isCollapsedCopy link to isCollapsedSignal<boolean>: Whether the item is rendered in its collapsed (icon-only) form.
titleTextCopy link to titleTextstring | null: Text used for the tooltip and for the accessible name of a collapsed item.

KbqNavbarToggle

component

 @Component({ selector: 'kbq-navbar-toggle, [kbq-navbar-toggle]' })
class KbqNavbarToggle {
    toggle(): void;
}

toggle()Copy link to toggle()void: toggles the state of the navbar

KbqVerticalNavbar

component

 @Component({ selector: 'kbq-vertical-navbar', exportAs: 'KbqVerticalNavbar' })
class KbqVerticalNavbar extends KbqFocusableComponent {
    readonly openOver = input<boolean>(false);
    readonly expanded = model<boolean>(false);
    readonly ariaLabel = input<string | null>(null, {
        alias: 'aria-label'
    });
    readonly localeConfiguration: Signal<KbqNavbarLocaleConfiguration>;
    toggle(): void;
}

openOverinputCopy link to openOverboolean: Whether the expanded navbar overlays the page content instead of taking room from it.
expandedmodelCopy link to expandedboolean: Whether the navbar is expanded.
localeOverridesinputCopy link to localeOverridesKbqPartialLocaleData | undefined: Localized strings for this element and its subtree, keyed by locale section. Every key is optional at every depth.
aria-labelinputCopy link to aria-labelstring | null: Accessible name of the navigation landmark. Set it whenever a page renders more than one navbar, so assistive technology can tell them apart.
localeConfigurationCopy link to localeConfigurationSignal<KbqNavbarLocaleConfiguration>: Localized strings of the navbar.
A signal, so that a locale change reaches the OnPush descendants that render these strings — a plain field would leave them showing the previous locale until something else marked them dirty. It also keeps the value observable from outside: KbqNavbarToggle reads it in an effect to refresh its tooltip, which a markForCheck() here could never have reached in that separate OnPush view.
toggle()Copy link to toggle()void: Expands a collapsed navbar and collapses an expanded one.

Directives

KbqFocusableComponent

directive

 @Directive()
class KbqFocusableComponent {
    readonly ariaLabel = input<string | null>(null, {
        alias: 'aria-label'
    });
}

aria-labelinputCopy link to aria-labelstring | null: Accessible name of the navigation landmark. Set it whenever a page renders more than one navbar, so assistive technology can tell them apart.

KbqNavbarBento

directive

 @Directive({ selector: 'kbq-navbar-item[bento], [kbq-navbar-item][bento]' })
class KbqNavbarBento {}

KbqNavbarContainer

directive

 @Directive({ selector: 'kbq-navbar-container' })
class KbqNavbarContainer {}

KbqNavbarDivider

directive

 @Directive({ selector: 'kbq-navbar-divider' })
class KbqNavbarDivider {}

KbqNavbarFocusableItem

directive

 @Directive({
    selector: 'kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle'
})
class KbqNavbarFocusableItem implements IFocusableOption {
    disabled = input<boolean | undefined>();
    get nestedElement(): KbqButton | KbqFormField | undefined;
    set hasFocus(value: boolean);
}

disabledinputCopy link to disabledboolean | undefined: Whether the item is disabled. Also true for a decorative element, which the key manager skips as well.
nestedElementCopy link to nestedElementKbqButton | KbqFormField | undefined: Interactive element projected into the item, if any.

KbqNavbarItemSuffix

directive

Marks content to be projected after the title of a navbar item.

 @Directive({ selector: '[kbqNavbarItemSuffix]' })
class KbqNavbarItemSuffix {}

KbqNavbarLogo

directive

 @Directive({ selector: 'kbq-navbar-logo, [kbq-navbar-logo]' })
class KbqNavbarLogo {}

KbqNavbarRectangleElement

directive

 @Directive({
    selector: 'kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]'
})
class KbqNavbarRectangleElement {
    orientation: KbqNavbarOrientation;
    set collapsed(value: boolean);
    getOuterElementWidth(): number;
}

orientationCopy link to orientationKbqNavbarOrientation: Orientation of the navbar this element belongs to. Written by the ambient KbqNavbar / KbqVerticalNavbar; the element itself only reads it.
getOuterElementWidth()Copy link to getOuterElementWidth()number: Outer width of the element: its border box plus horizontal margins.

KbqNavbarTitle

directive

 @Directive({ selector: 'kbq-navbar-title, [kbq-navbar-title]' })
class KbqNavbarTitle {
    get text(): string;
    get isOverflown(): boolean;
    get isClamped(): boolean;
    getOuterElementWidth(): number;
}

textCopy link to textstring: Text content of the title element.
isOverflownCopy link to isOverflownboolean: Whether the text is clipped horizontally (e.g. by text-overflow: ellipsis).
isClampedCopy link to isClampedboolean: Whether the text is clipped vertically (e.g. by -webkit-line-clamp).
Kept separate from isOverflown on purpose: wrapped text never exceeds its width, so only this check catches a clamped title. isOverflown is also read by KbqNavbarItem, whose titles are always nowrap — folding the two together would let sub-pixel line-height rounding enable tooltips on every navbar item.
getOuterElementWidth()Copy link to getOuterElementWidth()number: Outer width of the title: its border box plus horizontal margins.

Types

KbqNavbarOrientation

type

Orientation of the navbar an element belongs to.

type KbqNavbarOrientation = 'horizontal' | 'vertical';

Constants

KBQ_VERTICAL_NAVBAR_CONFIGURATION

const

Deprecated

Use KBQ_NAVBAR_LOCALE_CONFIGURATION. Will be removed in 22.0.0.

const KBQ_VERTICAL_NAVBAR_CONFIGURATION: InjectionToken<KbqNavbarLocaleConfiguration>;

KBQ_VERTICAL_NAVBAR_DEFAULT_CONFIGURATION

const

Deprecated

Use KBQ_NAVBAR_DEFAULT_LOCALE_CONFIGURATION. Will be removed in 22.0.0.

const KBQ_VERTICAL_NAVBAR_DEFAULT_CONFIGURATION: KbqNavbarLocaleConfiguration;

kbqNavbarLocaleConfigurationProvider

const

Utility provider for KBQ_NAVBAR_LOCALE_CONFIGURATION. Only the strings you pass are overridden; the rest keep following the active locale.

 const kbqNavbarLocaleConfigurationProvider: (
    configuration: KbqDeepPartial<KbqNavbarLocaleConfiguration>
) => Provider;

If you found a mistake or want to improve the article, create an issue on GitHub.