Appbar component
The kit:appbar is an essential component for structuring an application’s header. It provides a dedicated space for displaying elements such as titles, icons, buttons or menus. Thanks to its many customization options, the kit:appbar integrates perfectly into a variety of designs, from minimalist to complex.
kit:appbar renders as a <header> by default. It wraps your content in an inner kit-appbar__wrapper div that fills the full width and aligns items in a row. Use classContent to apply a class to that wrapper typically to constrain the max-width of the content while the background spans the full width.
Examples of app bar
Base
The variant prop controls the background and border style.
- variant:
'filled' | 'outline' | 'text'='filled'
Density
density adjusts the height and horizontal padding of the appbar.
- density:
'compact' | 'default' | 'comfortable'='default'
classContent
classContent applies a CSS class to the inner content wrapper. Use it to constrain the max-width of the content while the appbar background spans the full width.
- classContent:
string | string[]=''
Without preprocess Lapikit
If you aren’t using the Lapikit preprocessor in svelte.config.js, import the component directly:
API Reference
kit:appbar
| props | type | description | default |
|---|---|---|---|
| is | enum'div''header''nav' | HTML element to render. | 'header' |
| variant | enum'filled''outline''text' | Visual style of the appbar. | 'filled' |
| density | enum'compact''default''comfortable' | Height and horizontal padding. | 'default' |
| rounded | stringenum0'xs''sm''md''lg''xl' | Border radius. Accepts a custom px value. | 0 |
| color | string | Foreground color override (--kit-appbar-fg). | |
| background | string | Background color override (--kit-appbar-bg). | |
| classContent | string | string[] | Class(es) applied to the inner content wrapper. | |
| children | Snippet | Appbar content. |
An effective kit:appbar goes well with Dropdown for menus and Avatars for identification.