Skeleton
import { AppBar } from '@skeletonlabs/skeleton-react';
import { CalendarIcon } from 'lucide-react';
import { CircleUserIcon } from 'lucide-react';
import { MenuIcon } from 'lucide-react';
import { SearchIcon } from 'lucide-react';
export default function Default() {
return (
<AppBar>
<AppBar.Toolbar className="grid-cols-[auto_1fr_auto]">
<AppBar.Lead>
<button type="button" className="btn-icon btn-icon-lg hover:preset-tonal">
<MenuIcon />
</button>
</AppBar.Lead>
<AppBar.Headline>
<p className="text-2xl">Skeleton</p>
</AppBar.Headline>
<AppBar.Trail>
<button type="button" className="btn-icon hover:preset-tonal">
<SearchIcon className="size-6" />
</button>
<button type="button" className="btn-icon hover:preset-tonal">
<CalendarIcon className="size-6" />
</button>
<button type="button" className="btn-icon hover:preset-tonal">
<CircleUserIcon className="size-6" />
</button>
</AppBar.Trail>
</AppBar.Toolbar>
</AppBar>
);
}Skeleton
<script lang="ts">
import { CalendarIcon, CircleUserIcon, MenuIcon, SearchIcon } from '@lucide/svelte';
import { AppBar } from '@skeletonlabs/skeleton-svelte';
</script>
<AppBar>
<AppBar.Toolbar class="grid-cols-[auto_1fr_auto]">
<AppBar.Lead>
<button type="button" class="btn-icon btn-icon-lg hover:preset-tonal"><MenuIcon /></button>
</AppBar.Lead>
<AppBar.Headline>
<p class="text-2xl">Skeleton</p>
</AppBar.Headline>
<AppBar.Trail>
<button type="button" class="btn-icon hover:preset-tonal"><SearchIcon class="size-6" /></button>
<button type="button" class="btn-icon hover:preset-tonal"><CalendarIcon class="size-6" /></button>
<button type="button" class="btn-icon hover:preset-tonal"><CircleUserIcon class="size-6" /></button>
</AppBar.Trail>
</AppBar.Toolbar>
</AppBar>Centered
Control the layout using a grid-cols-* utility class.
Headline
import { AppBar } from '@skeletonlabs/skeleton-react';
import { CalendarIcon } from 'lucide-react';
import { CircleUserIcon } from 'lucide-react';
import { MenuIcon } from 'lucide-react';
import { SearchIcon } from 'lucide-react';
export default function Centered() {
return (
<AppBar>
<AppBar.Toolbar className="grid-cols-[1fr_2fr_1fr]">
<AppBar.Lead>
<button type="button" className="btn-icon btn-icon-lg hover:preset-tonal">
<MenuIcon />
</button>
</AppBar.Lead>
<AppBar.Headline className="flex justify-center">
<p>Headline</p>
</AppBar.Headline>
<AppBar.Trail className="justify-end">
<button type="button" className="btn-icon hover:preset-tonal">
<SearchIcon className="size-6" />
</button>
<button type="button" className="btn-icon hover:preset-tonal">
<CalendarIcon className="size-6" />
</button>
<button type="button" className="btn-icon hover:preset-tonal">
<CircleUserIcon className="size-6" />
</button>
</AppBar.Trail>
</AppBar.Toolbar>
</AppBar>
);
}Headline
<script lang="ts">
import { CalendarIcon, CircleUserIcon, MenuIcon, SearchIcon } from '@lucide/svelte';
import { AppBar } from '@skeletonlabs/skeleton-svelte';
</script>
<AppBar>
<AppBar.Toolbar class="grid-cols-[1fr_2fr_1fr]">
<AppBar.Lead>
<button type="button" class="btn-icon btn-icon-lg hover:preset-tonal"><MenuIcon /></button>
</AppBar.Lead>
<AppBar.Headline class="flex justify-center">
<p>Headline</p>
</AppBar.Headline>
<AppBar.Trail class="justify-end">
<button type="button" class="btn-icon hover:preset-tonal"><SearchIcon class="size-6" /></button>
<button type="button" class="btn-icon hover:preset-tonal"><CalendarIcon class="size-6" /></button>
<button type="button" class="btn-icon hover:preset-tonal"><CircleUserIcon class="size-6" /></button>
</AppBar.Trail>
</AppBar.Toolbar>
</AppBar>Extended
Move the <AppBar.Headline> to a new row within the root.
Headline
import { AppBar } from '@skeletonlabs/skeleton-react';
import { CalendarIcon } from 'lucide-react';
import { CircleUserIcon } from 'lucide-react';
import { MenuIcon } from 'lucide-react';
import { SearchIcon } from 'lucide-react';
export default function Extended() {
return (
<AppBar>
<AppBar.Toolbar className="grid-cols-[auto_auto]">
<AppBar.Lead>
<button type="button" className="btn-icon btn-icon-lg hover:preset-tonal">
<MenuIcon />
</button>
</AppBar.Lead>
<AppBar.Trail>
<button type="button" className="btn-icon hover:preset-tonal">
<SearchIcon className="size-6" />
</button>
<button type="button" className="btn-icon hover:preset-tonal">
<CalendarIcon className="size-6" />
</button>
<button type="button" className="btn-icon hover:preset-tonal">
<CircleUserIcon className="size-6" />
</button>
</AppBar.Trail>
</AppBar.Toolbar>
<AppBar.Headline>
<h2 className="h2">Headline</h2>
</AppBar.Headline>
</AppBar>
);
}Headline
<script lang="ts">
import { CalendarIcon, CircleUserIcon, MenuIcon, SearchIcon } from '@lucide/svelte';
import { AppBar } from '@skeletonlabs/skeleton-svelte';
</script>
<AppBar>
<AppBar.Toolbar class="grid-cols-[auto_auto]">
<AppBar.Lead>
<button type="button" class="btn-icon btn-icon-lg hover:preset-tonal"><MenuIcon /></button>
</AppBar.Lead>
<AppBar.Trail>
<button type="button" class="btn-icon hover:preset-tonal"><SearchIcon class="size-6" /></button>
<button type="button" class="btn-icon hover:preset-tonal"><CalendarIcon class="size-6" /></button>
<button type="button" class="btn-icon hover:preset-tonal"><CircleUserIcon class="size-6" /></button>
</AppBar.Trail>
</AppBar.Toolbar>
<AppBar.Headline>
<h2 class="h2">Headline</h2>
</AppBar.Headline>
</AppBar>Responsive
Modify the layout based on responsive breakpoints.
Headline
Headline
import { AppBar } from '@skeletonlabs/skeleton-react';
import { CalendarIcon } from 'lucide-react';
import { CircleUserIcon } from 'lucide-react';
import { MenuIcon } from 'lucide-react';
import { SearchIcon } from 'lucide-react';
export default function Responsive() {
return (
<>
<AppBar>
{/* 1. Set dynamic layout columns */}
<AppBar.Toolbar className="grid-cols-[auto_1fr_auto] md:grid-cols-[auto_auto]">
<AppBar.Lead>
<button type="button" className="btn-icon btn-icon-lg hover:preset-tonal">
<MenuIcon />
</button>
</AppBar.Lead>
{/* 2. Set Mobile display */}
<AppBar.Headline className="md:hidden">
<p className="text-2xl">Headline</p>
</AppBar.Headline>
<AppBar.Trail>
<button type="button" className="btn-icon hover:preset-tonal">
<SearchIcon className="size-6" />
</button>
<button type="button" className="btn-icon hover:preset-tonal">
<CalendarIcon className="size-6" />
</button>
<button type="button" className="btn-icon hover:preset-tonal">
<CircleUserIcon className="size-6" />
</button>
</AppBar.Trail>
</AppBar.Toolbar>
{/* 3 Set Desktop display */}
<AppBar.Headline className="hidden md:block">
<p className="text-2xl">Headline</p>
</AppBar.Headline>
</AppBar>
</>
);
}Headline
Headline
<script lang="ts">
import { CalendarIcon, CircleUserIcon, MenuIcon, SearchIcon } from '@lucide/svelte';
import { AppBar } from '@skeletonlabs/skeleton-svelte';
</script>
<AppBar>
<!-- 1. Set dynamic layout columns -->
<AppBar.Toolbar class="grid-cols-[auto_1fr_auto] md:grid-cols-[auto_auto]">
<AppBar.Lead>
<button type="button" class="btn-icon btn-icon-lg hover:preset-tonal"><MenuIcon /></button>
</AppBar.Lead>
<!-- 2. Set Mobile display -->
<AppBar.Headline class="md:hidden">
<p class="text-2xl">Headline</p>
</AppBar.Headline>
<AppBar.Trail>
<button type="button" class="btn-icon hover:preset-tonal"><SearchIcon class="size-6" /></button>
<button type="button" class="btn-icon hover:preset-tonal"><CalendarIcon class="size-6" /></button>
<button type="button" class="btn-icon hover:preset-tonal"><CircleUserIcon class="size-6" /></button>
</AppBar.Trail>
</AppBar.Toolbar>
<!-- 3 Set Desktop display -->
<AppBar.Headline class="hidden md:block">
<p class="text-2xl">Headline</p>
</AppBar.Headline>
</AppBar>Anatomy
Here’s an overview of how the AppBar component is structured in code:
import { AppBar } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
<AppBar>
<AppBar.Toolbar>
<AppBar.Lead />
<AppBar.Headline />
<AppBar.Trail />
</AppBar.Toolbar>
</AppBar>
);
}<script lang="ts">
import { AppBar } from '@skeletonlabs/skeleton-svelte';
</script>
<AppBar>
<AppBar.Toolbar>
<AppBar.Lead />
<AppBar.Headline />
<AppBar.Trail />
</AppBar.Toolbar>
</AppBar>API Reference
Unable to load component information for react/app-bar
Unable to load component information for svelte/app-bar