Lapikit

Appbar component

Appbar

The 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 Appbar integrates perfectly into a variety of designs, from minimalist to complex.

Lapikit

Examples of app bar

Base

The basic example illustrates an Appbar with its default settings. This simple starting point allows you to quickly understand how to use the component in an application.

Lapikit

Density

The density property lets you control the Appbar’s appearance by adjusting its height and spacing. The available options: compact, comfortable and default, meet different design and ergonomic needs.

Lapikit

API Reference

props	type	description	default	type_extend
ref $bindable	HTMLElement	Direct access to DOM element	undefined
is	enum	Defines the HTML tag.	div	header \| nav \| div
classContent	string	Adds one or more custom CSS classes to the Appbar wrapper.	undefined
dark	boolean	Enable dark theme for component.	false
light	boolean	Enable light theme for the component.	false
color	string	Applies a custom color to text or icons.	undefined
background	string	Apply a custom background color.	undefined
density	enum	Controls vertical density	`default`	`compact` \| `comfortable` \| `default`
rounded	string	Controls item rounding (`none`, `sm`, `md`, `lg`, etc.).	`md`

Variables CSS

variable	default	description
`–-appbar-color`	`--kit-label-primary`	Text color
`–-appbar-background`	`--kit-background-grouped-tertiary`	Background color
`–-appbar-shape`	`0`	Appbar edge radius
`–-appbar-padding-wrapper`	`–-system-spacing * 4`	Spacing between Appbar parent and content

An effective Appbar goes well with Dropdown for menus and Avatars for identification.

Do you have a question? Ask on GitHub or Discord server

Do you see a bug? Open an issue on GitHub

View source code on GitHub