Skeleton

<script lang="ts">
  import { AppBar } from '@skeletonlabs/skeleton-svelte';
  import ArrowLeft from 'lucide-svelte/icons/arrow-left';
  import Paperclip from 'lucide-svelte/icons/paperclip';
  import Calendar from 'lucide-svelte/icons/calendar';
  import CircleUser from 'lucide-svelte/icons/circle-user';
</script>

<AppBar>
  {#snippet lead()}
    <ArrowLeft size={24} />
  {/snippet}
  {#snippet trail()}
    <Paperclip size={20} />
    <Calendar size={20} />
    <CircleUser size={20} />
  {/snippet}
  {#snippet headline()}
    <h2 class="h2">Headline</h2>
  {/snippet}
</AppBar>

<script lang="ts">
  import { AppBar } from '@skeletonlabs/skeleton-svelte';
  import ArrowLeft from 'lucide-svelte/icons/arrow-left';
  import Paperclip from 'lucide-svelte/icons/paperclip';
  import Calendar from 'lucide-svelte/icons/calendar';
  import CircleUser from 'lucide-svelte/icons/circle-user';
</script>

<AppBar>
  {#snippet lead()}
    <ArrowLeft size={24} />
  {/snippet}
  {#snippet trail()}
    <Paperclip size={20} />
    <Calendar size={20} />
    <CircleUser size={20} />
  {/snippet}
  <span>Title</span>
</AppBar>

Responsive

Use Tailwind’s responsive design breakpoints to adjust for various screen sizes.

<script lang="ts">
  import { AppBar } from '@skeletonlabs/skeleton-svelte';
  import ArrowLeft from 'lucide-svelte/icons/arrow-left';
  import Paperclip from 'lucide-svelte/icons/paperclip';
  import Calendar from 'lucide-svelte/icons/calendar';
  import CircleUser from 'lucide-svelte/icons/circle-user';
  import Menu from 'lucide-svelte/icons/menu';
</script>

<AppBar headlineClasses="sm:hidden" centerClasses="hidden sm:block">
  {#snippet lead()}
    <ArrowLeft size={24} />
  {/snippet}
  {#snippet trail()}
    <div class="hidden space-x-4 sm:flex">
      <Paperclip size={20} />
      <Calendar size={20} />
      <CircleUser size={20} />
    </div>
    <div class="block sm:hidden">
      <Menu size={20} />
    </div>
  {/snippet}
  {#snippet headline()}
    <h2 class="h2">Title</h2>
  {/snippet}
  <span>Title</span>
</AppBar>

API Reference

AppBar

Property	Type	Description
`base`	string	Set base styles.
`background`	string	Set background styles.
`spaceY`	string	Set vertical spacing styles.
`border`	string	Set border styles.
`padding`	string	Set padding styles.
`shadow`	string	Set shadow styles.
`classes`	string	Provide arbitrary CSS classes.
`toolbarBase`	string	Sets toolbar's base styles.
`toolbarGridCols`	string	Sets toolbar's grid columns styles.
`toolbarGap`	string	Sets toolbar's gap styles.
`toolbarClasses`	string	Provide arbitrary CSS classes to the toolbar.
`leadBase`	string	Sets the lead snippet element's base styles.
`leadSpaceX`	string	Sets the lead snippet element's horizontal spacing styles.
`leadPadding`	string	Sets the lead snippet element's padding styles.
`leadClasses`	string	Provide arbitrary CSS classes to the lead snippet.
`centerBase`	string	Sets the center snippet element's base styles.
`centerAlign`	string	Sets the center snippet element's alignment styles.
`centerPadding`	string	Sets the center snippet element's padding styles.
`centerClasses`	string	Provide arbitrary CSS classes to the center snippet.
`trailBase`	string	Sets the trail snippet element's base styles.
`trailSpaceX`	string	Sets the trail snippet element's horizontal spacing styles.
`trailPadding`	string	Sets the trail snippet element's padding styles.
`trailClasses`	string	Provide arbitrary CSS classes to the trail snippet.
`headlineBase`	string	Sets the headline snippet element's base styles.
`headlineClasses`	string	Provide arbitrary CSS classes to the headline snippet.
`children`	Snippet<[]>	The center slot.
`lead`	Snippet<[]>	The lead slot.
`trail`	Snippet<[]>	The trail slot.
`headline`	Snippet<[]>	The headline slot.

Toolbar

Responsive

API Reference

AppBar