Svelte Component

App Bar

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

import { AppBar } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA


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

Single Row and Title


Using Grid Layout

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

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