Page title

Action-led, value-oriented description of what this page does.

<script lang="ts">
  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
  import { Button } from "kumo-svelte/components/button";
  import * as Breadcrumbs from "kumo-svelte/components/breadcrumbs";
  import * as Tabs from "kumo-svelte/components/tabs";
  import PageHeaderDemoShell from "./page-header-demo-shell.svelte";
</script>

<PageHeaderDemoShell
  title="Page title"
  description="Action-led, value-oriented description of what this page does."
>
  {#snippet breadcrumbs()}
    <Breadcrumbs.Root>
      <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
    </Breadcrumbs.Root>
  {/snippet}
  {#snippet actions()}
    <Button variant="outline" size="sm">Export</Button>
    <Button variant="primary" size="sm">
      <PlusIcon class="size-4" />
      New Item
    </Button>
  {/snippet}
  {#snippet tabs()}
    <Tabs.Root value="overview">
      <Tabs.List>
        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
        <Tabs.Trigger value="analytics">Analytics</Tabs.Trigger>
        <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
      </Tabs.List>
    </Tabs.Root>
  {/snippet}
</PageHeaderDemoShell>

Usage

Compose page headers from Breadcrumbs, Tabs, and Button.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import * as Breadcrumbs from "kumo-svelte/components/breadcrumbs";
  import * as Tabs from "kumo-svelte/components/tabs";
</script>

<header class="rounded-lg border border-kumo-hairline bg-kumo-base">
  <div class="flex items-start justify-between gap-4 p-4">
    <Breadcrumbs.Root>
      <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current>My Project</Breadcrumbs.Current>
    </Breadcrumbs.Root>
    <Button variant="primary" size="sm">Deploy</Button>
  </div>
  <div class="border-t border-kumo-hairline px-4 py-3">
    <Tabs.Root value="overview">
      <Tabs.List>
        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
        <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
      </Tabs.List>
    </Tabs.Root>
  </div>
</header>

Examples

Basic

<script lang="ts">
  import * as Breadcrumbs from "kumo-svelte/components/breadcrumbs";
  import PageHeaderDemoShell from "./page-header-demo-shell.svelte";
</script>

<PageHeaderDemoShell>
  {#snippet breadcrumbs()}
    <Breadcrumbs.Root>
      <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>
    </Breadcrumbs.Root>
  {/snippet}
</PageHeaderDemoShell>

With Tabs

<script lang="ts">
  import * as Breadcrumbs from "kumo-svelte/components/breadcrumbs";
  import * as Tabs from "kumo-svelte/components/tabs";
  import PageHeaderDemoShell from "./page-header-demo-shell.svelte";
</script>

<PageHeaderDemoShell>
  {#snippet breadcrumbs()}
    <Breadcrumbs.Root>
      <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current>Settings</Breadcrumbs.Current>
    </Breadcrumbs.Root>
  {/snippet}
  {#snippet tabs()}
    <Tabs.Root value="general">
      <Tabs.List>
        <Tabs.Trigger value="general">General</Tabs.Trigger>
        <Tabs.Trigger value="security">Security</Tabs.Trigger>
        <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
      </Tabs.List>
    </Tabs.Root>
  {/snippet}
</PageHeaderDemoShell>

Complete Example

Combining breadcrumbs, title, description, tabs, and actions.

Page title

Action-led, value-oriented description of what this page does.

<script lang="ts">
  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
  import { Button } from "kumo-svelte/components/button";
  import * as Breadcrumbs from "kumo-svelte/components/breadcrumbs";
  import * as Tabs from "kumo-svelte/components/tabs";
  import PageHeaderDemoShell from "./page-header-demo-shell.svelte";
</script>

<PageHeaderDemoShell
  title="Page title"
  description="Action-led, value-oriented description of what this page does."
>
  {#snippet breadcrumbs()}
    <Breadcrumbs.Root>
      <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
    </Breadcrumbs.Root>
  {/snippet}
  {#snippet actions()}
    <Button variant="outline" size="sm">Export</Button>
    <Button variant="primary" size="sm">
      <PlusIcon class="size-4" />
      New Item
    </Button>
  {/snippet}
  {#snippet tabs()}
    <Tabs.Root value="overview">
      <Tabs.List>
        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
        <Tabs.Trigger value="analytics">Analytics</Tabs.Trigger>
        <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
      </Tabs.List>
    </Tabs.Root>
  {/snippet}
</PageHeaderDemoShell>