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

Configurations

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

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>

Barebones

html 
<AppBar>(title)</AppBar>

Using Grid Layout

The main row utilizes a grid-base layout. Utilize Tailwind's grid column utility classes to control column width. Then use place settings to adjust the placement of the slot contents.

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>

The example above provides an even three columns layout with the title centered and actions right-aligned.