Overview
KToolbar is a versatile toolbar component designed for app bars and navigation headers in Kolibri applications. It provides a consistent structure for displaying titles, navigation icons, and action buttons with customizable colors and styling options.
Usage
Light theme toolbar
This example demonstrates a toolbar with light theme colors using
$themeTokens.appBar background and $themeTokens.text
color, with a close icon in the icon slot.
Dark theme toolbar with router navigation
This example shows a dark-themed toolbar using
$themeTokens.appBarDark background and
$themeTokens.textInverted color, with a back navigation button wrapped in
router-link.
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
type | Controls the toolbar appearance and styling. Options are:
| string |
'default'
| — |
textColor | Controls the text color throughout the toolbar. Use 'white' for dark backgrounds
and 'black' for light backgrounds to ensure proper contrast. | string |
'black'
| — |
title | The main title text displayed in the toolbar | string |
''
| — |
brand | Brand text displayed alongside the title in the left area | string |
''
| — |
navIcon | Icon name displayed in the navigation button when using the default icon slot | string |
'menu'
| — |
removeNavIcon | Whether to hide the navigation icon button completely | boolean |
false
| — |
raised | Whether the toolbar has elevated shadow styling for visual hierarchy | boolean |
true
| — |
progressPosition | Position of the loading progress bar indicator. Options are 'top' or 'bottom'. | string |
'bottom'
| — |
loading | Whether to show the loading progress indicator | boolean |
false
| — |
Events
| Name | Description |
|---|---|
nav-icon-click | Emitted when the navigation icon is clicked |
Slots
| Name | Description |
|---|---|
icon | Customize the navigation icon. Provides a UiIconButton by default. |
brand | Customize the brand area. Shows brand text by default. |
default | Main content area. Shows the title by default. |
navigation | Navigation links or menu items area. |
actions | Action buttons or secondary controls area. |