App Bar

Svelte Component

A header element for the top of your page layout. Pairs well with the App Shell.

@skeletonlabs/skeleton
Source Code
View Page Source
Accessibility Reference

Examples

Getting Started

App Bars can be generated with a number of different configurations by mixing and matching available slots and props.

Configurations

Two Rows and Headline

html 
<AppBar>
	<svelte:fragment slot="lead">(icon)</svelte:fragment>
	<svelte:fragment slot="trail">(actions)</svelte:fragment>
	<svelte:fragment slot="headline">(headline)</svelte:fragment>
</AppBar>

Single Row and Title

html 
<AppBar>
	<svelte:fragment slot="lead">(icon)</svelte:fragment>
	(title)
	<svelte:fragment slot="trail">(actions)</svelte:fragment>
</AppBar>

Even Columns

html 
<AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
	<svelte:fragment slot="lead">(icon)</svelte:fragment>
	(title)
	<svelte:fragment slot="trail">(actions)</svelte:fragment>
</AppBar>

Barebones

html 
<AppBar>(title)</AppBar>