Blocks

Subheader

A toolbar block with variant-driven layout for actions, search, and navigation controls.

Usage

Use any variant with the props that match it, shape the bar with custom slots or combine both.

Loading preview...

<template>
  <MeSubheader
    variant="primary"
    toggle-sidebar
    :create-actions="createActions"
    :button-bar="buttonBar"
  >
    <template #right>
      <div
        class="flex shrink-0 items-center rounded-md border border-primary/30 bg-primary/5 px-3 py-2 font-mono text-xs font-medium text-primary"
      >
        slot
      </div>
    </template>
  </MeSubheader>
</template>

<script setup>
const createActions = {
  label: 'New Document',
  icon: 'i-lucide-plus',
  items: [
    { label: 'From template', icon: 'i-lucide-file-text' },
    { label: 'Blank document', icon: 'i-lucide-file' },
  ],
}

const buttonBar = {
  actions: [
    { label: 'Edit', icon: 'i-lucide-pencil' },
    { label: 'Duplicate', icon: 'i-lucide-copy' },
    { label: 'Archive', icon: 'i-lucide-archive' },
  ],
}
</script>

Custom Slots

Use left, default and right to replace the built-in regions. Each slot you pass overrides only that strip; regions without a slot keep the default props-based UI when the variant shows them.

left

default

right

<template>
  <MeSubheader>
    <template #left>
      <div
        class="flex min-h-9 shrink-0 items-center justify-center rounded-md border border-primary/30 bg-primary/5 px-3 font-mono text-xs font-medium text-primary"
      >
        left
      </div>
    </template>

    <template #default>
      <div
        class="flex min-h-9 min-w-0 flex-1 items-center justify-center rounded-md border border-primary/30 bg-primary/5 px-3 font-mono text-xs font-medium text-primary"
      >
        default
      </div>
    </template>

    <template #right>
      <div
        class="flex min-h-9 shrink-0 items-center justify-center rounded-md border border-primary/30 bg-primary/5 px-3 font-mono text-xs font-medium text-primary"
      >
        right
      </div>
    </template>
  </MeSubheader>
</template>

Variants

Primary

Renders the full layout when props are set: left (optional sidebar toggle and split create action), center (MeButtonBar), and right (optional search, chart toggle, and grid/view dropdown).

<template>
  <MeSubheader
    variant="primary"
    toggle-sidebar
    :create-actions="createActions"
    :button-bar="buttonBar"
    :search="{ placeholder: 'Search...' }"
    toggle-chart
    :grid-mode="gridMode"
  />
</template>

<script setup>
const createActions = {
  label: "New Document",
  icon: "i-lucide-plus",
  items: [
    { label: "From template", icon: "i-lucide-file-text" },
    { label: "Blank document", icon: "i-lucide-file" },
  ],
};

const buttonBar = {
  actions: [
    { label: "Edit", icon: "i-lucide-pencil" },
    { label: "Duplicate", icon: "i-lucide-copy" },
    { label: "Archive", icon: "i-lucide-archive" },
  ],
};

const gridMode = {
  items: [
    { label: "Table", icon: "i-lucide-table" },
    { label: "List", icon: "i-lucide-layout-list" },
    { label: "Card", icon: "i-lucide-layout-grid" },
  ],
};
</script>

Secondary

This variant builds the subheader with: center MeButtonBar, and the right optional Back and Confirm buttons.

<template>
  <MeSubheader
    variant="secondary"
    :button-bar="buttonBar"
    back
    confirm
  />
</template>

<script setup>
const buttonBar = {
  actions: [
    { label: "Cancel", variant: "outline" },
    { label: "Save Draft" },
    { label: "Submit" },
  ],
};
</script>

The tertiary layout uses MeButtonBar only. Subheader props from primary or secondary (createActions, search, back, etc.) are ignored. This layout emits no Subheader events; MeButtonBar handles its own interactions.

<template>
  <MeSubheader
    variant="tertiary"
    :button-bar="buttonBar"
  />
</template>

<script setup>
const buttonBar = {
  actions: [
    { label: "Edit", icon: "i-lucide-pencil" },
    { label: "Delete", icon: "i-lucide-trash" },
    { label: "Share", icon: "i-lucide-share-2" },
  ],
  options: [
    { label: "Export", icon: "i-lucide-download" },
    { label: "Print", icon: "i-lucide-printer" },
  ],
  size: "sm",
};
</script>

Prop	Default	Type
`variant`	`'primary'`	`String` `'primary' \| 'secondary' \| 'tertiary'`. Layout preset for the bar.
`buttonBar`		`ButtonBarProps` Center: `MeButtonBar` actions and options.

Primary

Prop	Default	Type
`toggleSidebar`		`boolean` Left: hamburger / sidebar toggle.
`createActions`		`object` Left: main action plus optional chevron menu (`label`, `icon`, `items`).
`search`		`object` Right: search input.
`toggleChart`		`boolean` Right: chart toggle with notification chip.
`gridMode`		`object` Right: view / layout dropdown (`icon`, `items`).