Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Form field Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation
Icons
CDK
 Key managers Keycodes
Interface and examples language
English
Version
19.7.0
Topbar

Topbar is a toolbar that always remains visible on the page and provides quick access to navigation and controls.

Depending on the interface requirements, it may include a logo, a title, breadcrumbs, action buttons, and other elements.

Page title

This content option is suitable for initial screens when there is no need to display the navigation path.

If you need to display the number of objects on the current page, you can do so by showing a special counter next to the page title:

Breadcrumbs

For internal pages of a specific module, using Breadcrumbs is an excellent option. This helps users navigate the application more easily.

Action buttons

On the right side of the toolbar, there is a dedicated area for placing any actions that need to be displayed on the current page.

We recommend using the following set of actions (from left to right):

  • Indicators (e.g., data refresh indicator)
  • A group of icon buttons (e.g., filters)
  • Frequently used actions as buttons (e.g., "Add...", "Share")
  • Additional actions in a dropdown menu, where all secondary actions related to the current page can be placed.
Responsive mode

Internal elements can adjust to the toolbar size.

The minimum allowed spacing between the left side and the right side with actions is 80px and is defined using the CSS variable --kbq-top-bar-spacer-min-width.

Breadcrumbs variant

When the panel is compressed, the breadcrumbs will adjust as follows:

A more detailed explanation of breadcrumb compression is provided on the Breadcrumbs page.

Page title variant

The variant using only the page title will adjust as follows:

Scroll behavior

The toolbar can remain fixed while scrolling the page.

Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.