Navbar · Koobiq

KbqNavbarBrand

Selector: kbq-navbar-brand, [kbq-navbar-brand]

Exported as: kbqNavbarBrand

Properties

Name	Description
@Input() collapsedText: string	text that will be displayed in the tooltip. By default, the text is taken from kbq-navbar-title.
@Input() longTitle: InputSignal	alternative display of the brand name in two lines
arrow: boolean	Input (`kbqTooltipArrow`) — whether to render the tooltip's arrow/pointer. Defaults to `false`.
collapsed: boolean
color: string	Input (`kbqTooltipColor`) with the tooltip color theme; the getter returns the `kbq-`-prefixed CSS class.
content: string \| TemplateRef	Input (`kbqTooltip`) with the tooltip content — a string or a template. Updating it refreshes an open tooltip.
context: any	Input (`kbqTooltipContext`) with the context object passed to a template tooltip; updating it refreshes the open tooltip.
customClass: string	Input (`kbqTooltipClass`) with an extra CSS class applied to the tooltip; updating it refreshes the class map.
disabled: boolean
enterDelay: number	Input (`kbqEnterDelay`) — delay in milliseconds before the tooltip is shown. Defaults to `400`.
forDisabledComponent: InputSignal>>	Input for controlling the disabled state of a component. The input expects a component containing `disabledSignal` property, which is a writable signal emitting boolean values.
header: string \| TemplateRef	Header text or template, rendered above the tooltip content. Only meaningful with `kbqTooltipModifier="extended"`. Replaces the removed `KbqExtendedTooltipTrigger.header`.
hideWithTimeout: boolean	Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger. Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger to tooltip.
ignoreTooltipPointerEvents: InputSignal	Determines whether pointer events should be ignored on tooltips. When set to `true`, tooltip elements will not receive pointer events, allowing interactions to pass through to underlying elements. Defaults to `true`.
isLink: boolean
isOpen: boolean	Whether the pop-up overlay is currently open.
leaveDelay: number	Input (`kbqLeaveDelay`) — delay in milliseconds before the tooltip is hidden. Defaults to `0`.
modifier: TooltipModifier \| "default" \| "warning" \| "extended"	Visual variant of the tooltip. Accepts `'default'` \| `'warning'` \| `'extended'`. Replaces the removed `KbqWarningTooltipTrigger` and `KbqExtendedTooltipTrigger` subclasses — to render a warning tooltip use `kbqTooltipModifier="warning"`, and `kbqTooltipModifier="extended"` for the extended variant (combine with `kbqTooltipHeader`).
offset: number	Input (`kbqTooltipOffset`) — distance in pixels between the tooltip and its trigger; `null` uses the default.
placementChange: EventEmitter	Output (`kbqPlacementChange`) that emits the new placement whenever the tooltip repositions.
relativeToPointer: boolean	Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.
tooltipPlacement: "top" \| "topLeft" \| "topRight" \| "right" \| "rightTop" \| "rightBottom" \| "left" \| "leftTop" \| "leftBottom" \| "bottom" \| "bottomLeft" \| "bottomRight"	Input (`kbqPlacement`) that sets the tooltip placement relative to its trigger; reflects the current `placement`.
tooltipPlacementPriority: string \| string[]	Input (`kbqPlacementPriority`) that sets the ordered fallback placements; reflects the current `placementPriority`.
tooltipVisible: boolean	Input (`kbqVisible`) that programmatically shows or hides the tooltip; reflects the current `visible` state.
trigger: string	Input (`kbqTrigger`) with the comma-separated trigger events. An empty value resets to hover + focus and rebinds listeners.
visibleChange: EventEmitter	Output (`kbqVisibleChange`) that emits when the tooltip's visibility changes.

Name

Description

@Input()

collapsedText: string

text that will be displayed in the tooltip. By default, the text is taken from kbq-navbar-title.

@Input()

longTitle: InputSignal

alternative display of the brand name in two lines

arrow: boolean

Input (`kbqTooltipArrow`) — whether to render the tooltip's arrow/pointer. Defaults to `false`.

collapsed: boolean

color: string

Input (`kbqTooltipColor`) with the tooltip color theme; the getter returns the `kbq-`-prefixed CSS class.

content: string | TemplateRef

Input (`kbqTooltip`) with the tooltip content — a string or a template. Updating it refreshes an open tooltip.

context: any

Input (`kbqTooltipContext`) with the context object passed to a template tooltip; updating it refreshes the open tooltip.

customClass: string

Input (`kbqTooltipClass`) with an extra CSS class applied to the tooltip; updating it refreshes the class map.

disabled: boolean

enterDelay: number

Input (`kbqEnterDelay`) — delay in milliseconds before the tooltip is shown. Defaults to `400`.

forDisabledComponent: InputSignal>>

Input for controlling the disabled state of a component. The input expects a component containing `disabledSignal` property, which is a writable signal emitting boolean values.

header: string | TemplateRef

Header text or template, rendered above the tooltip content. Only meaningful with `kbqTooltipModifier="extended"`. Replaces the removed `KbqExtendedTooltipTrigger.header`.

hideWithTimeout: boolean

Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger. Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger to tooltip.

ignoreTooltipPointerEvents: InputSignal

Determines whether pointer events should be ignored on tooltips. When set to `true`, tooltip elements will not receive pointer events, allowing interactions to pass through to underlying elements. Defaults to `true`.

isLink: boolean

isOpen: boolean

Whether the pop-up overlay is currently open.

leaveDelay: number

Input (`kbqLeaveDelay`) — delay in milliseconds before the tooltip is hidden. Defaults to `0`.

modifier: TooltipModifier | "default" | "warning" | "extended"

Visual variant of the tooltip. Accepts `'default'` | `'warning'` | `'extended'`. Replaces the removed `KbqWarningTooltipTrigger` and `KbqExtendedTooltipTrigger` subclasses — to render a warning tooltip use `kbqTooltipModifier="warning"`, and `kbqTooltipModifier="extended"` for the extended variant (combine with `kbqTooltipHeader`).

offset: number

Input (`kbqTooltipOffset`) — distance in pixels between the tooltip and its trigger; `null` uses the default.

placementChange: EventEmitter

Output (`kbqPlacementChange`) that emits the new placement whenever the tooltip repositions.

relativeToPointer: boolean

Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.

Input (`kbqPlacement`) that sets the tooltip placement relative to its trigger; reflects the current `placement`.

tooltipPlacementPriority: string | string[]

Input (`kbqPlacementPriority`) that sets the ordered fallback placements; reflects the current `placementPriority`.

tooltipVisible: boolean

Input (`kbqVisible`) that programmatically shows or hides the tooltip; reflects the current `visible` state.

trigger: string

Input (`kbqTrigger`) with the comma-separated trigger events. An empty value resets to hover + focus and rebinds listeners.

visibleChange: EventEmitter

Output (`kbqVisibleChange`) that emits when the tooltip's visibility changes.

Methods

show

Shows the tooltip after `delay` ms. Suppresses showing on a focus trigger that did not originate from the keyboard, and applies cursor-relative positioning when `relativeToPointer` is enabled.

KbqNavbarToggle

Selector: kbq-navbar-toggle, [kbq-navbar-toggle]

Methods

toggle

toggles the state of the navbar

KbqFocusableComponent

Properties

Name	Description
changeDetectorRef: ChangeDetectorRef
elementRef: ElementRef
focusMonitor: FocusMonitor
focusableItems: QueryList
keyManager: FocusKeyManager
optionBlurChanges: Observable
optionFocusChanges: Observable

Name

Description

changeDetectorRef: ChangeDetectorRef

elementRef: ElementRef

focusMonitor: FocusMonitor

focusableItems: QueryList

keyManager: FocusKeyManager

optionBlurChanges: Observable

optionFocusChanges: Observable

Methods

blur

dropSubscriptions

focus

resetOptions

KbqVerticalNavbar extends KbqFocusableComponent

Selector: kbq-vertical-navbar

Exported as: KbqVerticalNavbar

Properties

Name	Description
@Input() expanded: boolean
@Input() openOver: InputSignal
animationDone: Subject
bento: Signal
changeDetectorRef: ChangeDetectorRef
configuration: any
elementRef: ElementRef
externalConfiguration: unknown
focusMonitor: FocusMonitor
focusableItems: QueryList
items: Signal
keyManager: FocusKeyManager
optionBlurChanges: Observable
optionFocusChanges: Observable
rectangleElements: Signal

Name

Description

@Input()

expanded: boolean

@Input()

openOver: InputSignal

animationDone: Subject

bento: Signal

changeDetectorRef: ChangeDetectorRef

configuration: any

elementRef: ElementRef

externalConfiguration: unknown

focusMonitor: FocusMonitor

focusableItems: QueryList

items: Signal

keyManager: FocusKeyManager

optionBlurChanges: Observable

optionFocusChanges: Observable

rectangleElements: Signal

Methods

blur

dropSubscriptions

focus

onKeyDown

resetOptions

toggle

KbqNavbarLogo

Selector: kbq-navbar-logo, [kbq-navbar-logo]

Properties

Name	Description
hovered: Subject

Name

Description

hovered: Subject

KbqNavbarBento

Selector: kbq-navbar-item[bento], [kbq-navbar-item][bento]

KbqNavbarTitle

Selector: kbq-navbar-title, [kbq-navbar-title]

Properties

Name	Description
hovered: Subject
isBrowser: boolean
isOverflown: boolean
isTextOverflown: boolean
nativeElement: HTMLElement
outerElementWidth: number
text: string

Name

Description

hovered: Subject

isBrowser: boolean

isOverflown: boolean

isTextOverflown: boolean

nativeElement: HTMLElement

outerElementWidth: number

text: string

Methods

checkTextOverflown

getOuterElementWidth

KbqNavbarDivider

Selector: kbq-navbar-divider

KbqNavbarFocusableItem

Selector: kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle

Properties

Name	Description
@Input() disabled: boolean	Whether the item is disabled.
button: Signal
formField: Signal
hasFocus: boolean
nestedElement: KbqButton \| KbqFormField
onBlur: Subject
onFocus: Subject
title: Signal
tooltip: KbqTooltipTrigger

Name

Description

@Input()

disabled: boolean

Whether the item is disabled.

button: Signal

formField: Signal

hasFocus: boolean

nestedElement: KbqButton | KbqFormField

onBlur: Subject

onFocus: Subject

title: Signal

tooltip: KbqTooltipTrigger

Methods

blur

focus

getLabel

onFocusHandler

setTooltip

KbqNavbarContainer

Selector: kbq-navbar-container

KbqNavbar extends KbqFocusableComponent

Selector: kbq-navbar

Properties

Name	Description
changeDetectorRef: ChangeDetectorRef
elementRef: ElementRef
focusMonitor: FocusMonitor
focusableItems: QueryList
keyManager: FocusKeyManager
navbarItems: Signal
optionBlurChanges: Observable
optionFocusChanges: Observable
rectangleElements: Signal
resizeStream: Subject
updateExpandedStateForItems: () => void

Name

Description

changeDetectorRef: ChangeDetectorRef

elementRef: ElementRef

focusMonitor: FocusMonitor

focusableItems: QueryList

keyManager: FocusKeyManager

navbarItems: Signal

optionBlurChanges: Observable

optionFocusChanges: Observable

rectangleElements: Signal

resizeStream: Subject

updateExpandedStateForItems: () => void

Methods

blur

dropSubscriptions

focus

onKeyDown

resetOptions

KbqNavbarRectangleElement

Selector: kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]

Properties

Name	Description
button: Signal
collapsed: boolean
horizontal: boolean
isBrowser: boolean
nativeElement: HTMLElement
state: Subject
vertical: boolean

Name

Description

button: Signal

collapsed: boolean

horizontal: boolean

isBrowser: boolean

nativeElement: HTMLElement

state: Subject

vertical: boolean

Methods

getOuterElementWidth

KbqNavbarItem

Selector: kbq-navbar-item, [kbq-navbar-item]

Exported as: kbqNavbarItem

Properties

Name	Description
@Input() collapsable: boolean
@Input() collapsedText: string
@Input('kbqTrigger') trigger: string
arrow: boolean	Input (`kbqTooltipArrow`) — whether to render the tooltip's arrow/pointer. Defaults to `false`.
collapsed: boolean
color: string	Input (`kbqTooltipColor`) with the tooltip color theme; the getter returns the `kbq-`-prefixed CSS class.
content: string \| TemplateRef	Input (`kbqTooltip`) with the tooltip content — a string or a template. Updating it refreshes an open tooltip.
context: any	Input (`kbqTooltipContext`) with the context object passed to a template tooltip; updating it refreshes the open tooltip.
croppedText: string
customClass: string	Input (`kbqTooltipClass`) with an extra CSS class applied to the tooltip; updating it refreshes the class map.
disabled: boolean
enterDelay: number	Input (`kbqEnterDelay`) — delay in milliseconds before the tooltip is shown. Defaults to `400`.
forDisabledComponent: InputSignal>>	Input for controlling the disabled state of a component. The input expects a component containing `disabledSignal` property, which is a writable signal emitting boolean values.
hasCroppedText: boolean
hasDropDownTrigger: boolean
header: string \| TemplateRef	Header text or template, rendered above the tooltip content. Only meaningful with `kbqTooltipModifier="extended"`. Replaces the removed `KbqExtendedTooltipTrigger.header`.
hideWithTimeout: boolean	Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger. Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger to tooltip.
icon: Signal
ignoreTooltipPointerEvents: InputSignal	Determines whether pointer events should be ignored on tooltips. When set to `true`, tooltip elements will not receive pointer events, allowing interactions to pass through to underlying elements. Defaults to `true`.
isCollapsed: boolean
isOpen: boolean	Whether the pop-up overlay is currently open.
leaveDelay: number	Input (`kbqLeaveDelay`) — delay in milliseconds before the tooltip is hidden. Defaults to `0`.
modifier: TooltipModifier \| "default" \| "warning" \| "extended"	Visual variant of the tooltip. Accepts `'default'` \| `'warning'` \| `'extended'`. Replaces the removed `KbqWarningTooltipTrigger` and `KbqExtendedTooltipTrigger` subclasses — to render a warning tooltip use `kbqTooltipModifier="warning"`, and `kbqTooltipModifier="extended"` for the extended variant (combine with `kbqTooltipHeader`).
navbarFocusableItem: KbqNavbarFocusableItem
offset: number	Input (`kbqTooltipOffset`) — distance in pixels between the tooltip and its trigger; `null` uses the default.
placementChange: EventEmitter	Output (`kbqPlacementChange`) that emits the new placement whenever the tooltip repositions.
rectangleElement: KbqNavbarRectangleElement
relativeToPointer: boolean	Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.
showHorizontalDropDownAngle: boolean
showVerticalDropDownAngle: boolean
title: Signal
titleText: string
tooltipPlacement: "top" \| "topLeft" \| "topRight" \| "right" \| "rightTop" \| "rightBottom" \| "left" \| "leftTop" \| "leftBottom" \| "bottom" \| "bottomLeft" \| "bottomRight"	Input (`kbqPlacement`) that sets the tooltip placement relative to its trigger; reflects the current `placement`.
tooltipPlacementPriority: string \| string[]	Input (`kbqPlacementPriority`) that sets the ordered fallback placements; reflects the current `placementPriority`.
tooltipVisible: boolean	Input (`kbqVisible`) that programmatically shows or hides the tooltip; reflects the current `visible` state.
visibleChange: EventEmitter	Output (`kbqVisibleChange`) that emits when the tooltip's visibility changes.

Name

Description

@Input()

collapsable: boolean

@Input()

collapsedText: string

@Input('kbqTrigger')

trigger: string

arrow: boolean

Input (`kbqTooltipArrow`) — whether to render the tooltip's arrow/pointer. Defaults to `false`.

collapsed: boolean

color: string

Input (`kbqTooltipColor`) with the tooltip color theme; the getter returns the `kbq-`-prefixed CSS class.

content: string | TemplateRef

Input (`kbqTooltip`) with the tooltip content — a string or a template. Updating it refreshes an open tooltip.

context: any

Input (`kbqTooltipContext`) with the context object passed to a template tooltip; updating it refreshes the open tooltip.

croppedText: string

customClass: string

Input (`kbqTooltipClass`) with an extra CSS class applied to the tooltip; updating it refreshes the class map.

disabled: boolean

enterDelay: number

Input (`kbqEnterDelay`) — delay in milliseconds before the tooltip is shown. Defaults to `400`.

forDisabledComponent: InputSignal>>

Input for controlling the disabled state of a component. The input expects a component containing `disabledSignal` property, which is a writable signal emitting boolean values.

hasCroppedText: boolean

hasDropDownTrigger: boolean

header: string | TemplateRef

Header text or template, rendered above the tooltip content. Only meaningful with `kbqTooltipModifier="extended"`. Replaces the removed `KbqExtendedTooltipTrigger.header`.

hideWithTimeout: boolean

Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger. Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger to tooltip.

icon: Signal

ignoreTooltipPointerEvents: InputSignal

Determines whether pointer events should be ignored on tooltips. When set to `true`, tooltip elements will not receive pointer events, allowing interactions to pass through to underlying elements. Defaults to `true`.

isCollapsed: boolean

isOpen: boolean

Whether the pop-up overlay is currently open.

leaveDelay: number

Input (`kbqLeaveDelay`) — delay in milliseconds before the tooltip is hidden. Defaults to `0`.

modifier: TooltipModifier | "default" | "warning" | "extended"

Visual variant of the tooltip. Accepts `'default'` | `'warning'` | `'extended'`. Replaces the removed `KbqWarningTooltipTrigger` and `KbqExtendedTooltipTrigger` subclasses — to render a warning tooltip use `kbqTooltipModifier="warning"`, and `kbqTooltipModifier="extended"` for the extended variant (combine with `kbqTooltipHeader`).

navbarFocusableItem: KbqNavbarFocusableItem

offset: number

Input (`kbqTooltipOffset`) — distance in pixels between the tooltip and its trigger; `null` uses the default.

placementChange: EventEmitter

Output (`kbqPlacementChange`) that emits the new placement whenever the tooltip repositions.

rectangleElement: KbqNavbarRectangleElement

relativeToPointer: boolean

Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement. Does not work with kbqPlacementPriority.

showHorizontalDropDownAngle: boolean

showVerticalDropDownAngle: boolean

title: Signal

titleText: string

Input (`kbqPlacement`) that sets the tooltip placement relative to its trigger; reflects the current `placement`.

tooltipPlacementPriority: string | string[]

Input (`kbqPlacementPriority`) that sets the ordered fallback placements; reflects the current `placementPriority`.

tooltipVisible: boolean

Input (`kbqVisible`) that programmatically shows or hides the tooltip; reflects the current `visible` state.

visibleChange: EventEmitter

Output (`kbqVisibleChange`) that emits when the tooltip's visibility changes.

Methods

getTitleWidth

onKeyDown

show

Shows the tooltip after `delay` ms. Suppresses showing on a focus trigger that did not originate from the keyboard, and applies cursor-relative positioning when `relativeToPointer` is enabled.

updateDropdown

updateTooltip

KbqNavbarFocusableItemEvent

Properties

Name	Description
item: KbqNavbarFocusableItem

Name

Description

item: KbqNavbarFocusableItem

KbqNavbarContainerPositionType

type KbqNavbarContainerPositionType = 'left' | 'right';