AppHeader
Generic top-bar shell with three slots: `start`, `children` (middle), and `actions` (end). Renders a sticky dark surface; consumers compose any content into …
Generic top-bar shell with three slots: start, children (middle), and actions (end). Renders a sticky dark surface; consumers compose any content into the slots. The sidebar collapse toggle, brand logo, stats strip, and action buttons are all caller-provided — this component owns no domain.
import { AppHeader } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
logo | Optional | React.ReactNode | — | Left-most slot — typically the app's brand lockup / logo. |
start | Optional | React.ReactNode | — | Left-edge content — e.g. a sidebar collapse toggle button. |
children | Optional | React.ReactNode | — | Middle slot — typically the dashboard's stats strip. |
actions | Optional | React.ReactNode | — | Right-edge action cluster — e.g. alarms bell, profile menu. |
className | Optional | string | undefined | — | Optional class hook for the outer `<header>` element. |
sticky | Optional | boolean | undefined | — | Render the header sticky to the top of its scroll container. Defaults to `true`. |
Usage
A generic three-slot top-bar. The start, children (middle), and
actions slots accept any ReactNode — the component owns no domain.
When to use
- You're building an app shell with a persistent header.
- You want sticky-to-top behavior without writing layout CSS.
- You'd otherwise hand-roll a
<header>with flex columns.
Slots
start— left edge. Common: sidebar collapse toggle, brand wordmark.children— middle. Common: dashboard stats strip, page title.actions— right edge. Common: alarms bell, profile menu, sign-out.
Notes
- Sticky positioning is on by default. Pass
sticky={false}to disable. - The component sets
position: sticky; top: 0; the outer scroll container must be a scrollable ancestor for the sticky behavior to engage.
Example
import { AppHeader } from './app-header'/** * Three-slot top-bar shell. `start` for a brand/toggle, `children` for the * main strip, `actions` for the right-edge cluster. */export const AppHeaderExample = (): React.ReactNode => ( <AppHeader start={<strong>MDK</strong>} actions={<button type="button">Sign out</button>}> <div style={{ padding: '0 1rem', alignSelf: 'center' }}>Header content</div> </AppHeader>)