Components

Appbar component

On this page

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.

Lapikit

<script lang="ts">
	import { Bell, Search } from 'lucide-svelte';
</script>

<kit:appbar rounded="md">
	<span style="font-weight: 700; font-size: 1.1rem; margin-right: auto;">Lapikit</span>

	<nav style="display: flex; gap: 0.25rem;">
		<kit:btn variant="text" density="compact">Docs</kit:btn>
		<kit:btn variant="text" density="compact">Components</kit:btn>
	</nav>

	<span style="display: flex; gap: 0.25rem; margin-left: auto;">
		<kit:btn variant="text" density="compact" icon>
			<kit:icon><Search /></kit:icon>
		</kit:btn>
		<kit:btn variant="text" density="compact" icon>
			<kit:icon><Bell /></kit:icon>
		</kit:btn>
	</span>
</kit:appbar>

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'

<div style="display: flex; flex-direction: column; gap: 0.75rem;">
	<kit:appbar rounded="md" variant="filled">
		<span style="font-weight: 600;">Filled</span>
		<span style="margin-left: auto; opacity: 0.6; font-size: 0.875rem;">default background</span>
	</kit:appbar>

	<kit:appbar rounded="md" variant="outline">
		<span style="font-weight: 600;">Outline</span>
		<span style="margin-left: auto; opacity: 0.6; font-size: 0.875rem;">transparent + border</span>
	</kit:appbar>

	<kit:appbar rounded="md" variant="text">
		<span style="font-weight: 600;">Text</span>
		<span style="margin-left: auto; opacity: 0.6; font-size: 0.875rem;"
			>no background, no border</span
		>
	</kit:appbar>
</div>

Density

density adjusts the height and horizontal padding of the appbar.

density: 'compact' | 'default' | 'comfortable' = 'default'

<div style="display: flex; flex-direction: column; gap: 0.75rem;">
	<kit:appbar rounded="md" density="compact">
		<span style="font-weight: 600;">Compact</span>
		<span style="margin-left: auto; opacity: 0.6; font-size: 0.875rem;">3.5rem height</span>
	</kit:appbar>

	<kit:appbar rounded="md">
		<span style="font-weight: 600;">Default</span>
		<span style="margin-left: auto; opacity: 0.6; font-size: 0.875rem;">4rem height</span>
	</kit:appbar>

	<kit:appbar rounded="md" density="comfortable">
		<span style="font-weight: 600;">Comfortable</span>
		<span style="margin-left: auto; opacity: 0.6; font-size: 0.875rem;">4.5rem height</span>
	</kit:appbar>
</div>

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[] = ''

<kit:appbar classContent="custom-appbar-inner">
	<span style="font-weight: 700; margin-right: auto;">Lapikit</span>
	<nav style="display: flex; gap: 0.5rem;">
		<kit:btn variant="text" density="compact">Docs</kit:btn>
		<kit:btn variant="text" density="compact">Components</kit:btn>
	</nav>
</kit:appbar>

<style>
	:global(.custom-appbar-inner) {
		max-width: 480px;
		margin-inline: auto;
	}
</style>

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the component directly:

import { Appbar } from 'lapikit/components';

API Reference

kit:appbar

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element to render.	`'header'`
s-class	enum	Sets className on appbar.
s-style	enum	Sets styles on appbar.
variant	enum	Visual style of the appbar.	`'filled'`
density	enum	Height and horizontal padding.	`'default'`
rounded	enum	Border radius.	`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.
elevation	`ElevationState`enum	Add shadow effect.
size	enum	Sizing height, font and gap for appbar.	`'md'`

An effective kit:appbar goes well with Dropdown for menus and Avatars for identification.