# Site Header > A header bar across the top of the page, or at the top of the sidebar layout's page. Source: https://shadleaf.dev/current/components/site-header/ **Example: Site header.** A header bar: its content in a row from the start, the end slot at the end. Across the top of a page it has the page's ground and a border below. ```html Acme Inc. Sign in ``` ## Usage `` is a `header` that lays out its content in a row. Whatever you put in it starts at the start of the line; the `end` slot goes to the end: ```html Acme Inc. ``` Across the top of the page it is the page's banner landmark, on the page's colour with a border below. It has no `sticky` option yet; the header scrolls with the page. ## In the header layout With a [``](https://shadleaf.dev/current/components/sidebar.md#in-the-header) in it, it is the header layout's header: from 768 px the sidebar is a row of links in it, and on a phone a menu button (``) opens the same navigation as a panel. It then goes first in ``, above ``. With `variant="inset"` on the sidebar the header lies on the sidebar's colour without a border, and the page is a card below it. **Example: Header layout.** placement="header" puts the same navigation in a sl:site-header: from 768 px a row of links (the current page marked as in the sidebar), with the application's name before it and search, the theme toggle and the signed-in user's menu at the end. Favorites, Settings and Help are panel-only, so the row stays short; the panel's own header with the name is panel-only too. "More" beside Documents opens a dropdown menu below it. variant="inset" makes the page a card below the header. Narrower, the menu button opens the same nav as the panel: see the next example. ```html Acme Inc. Acme Inc. Enterprise Home Inbox 12 Calendar Documents New document Shared with me Favorites Marketing site Android app Settings Help Account

Home

The page's content.

 ``` The [Navigation in the header](https://shadleaf.dev/current/layouts/header.md) layout has the whole layout to copy. ## As the page's header At the top of ``, in the sidebar layout, it is the page's header (shadcn's sidebar-07): the trigger, a vertical [separator](https://shadleaf.dev/current/components/separator.md), the [breadcrumb](https://shadleaf.dev/current/components/breadcrumb.md), and the theme toggle at the end. Inside the `main` it is no landmark, and it has no border or colour of its own. The separator is a short line in the middle of the row there. The [Collapses to icons](https://shadleaf.dev/current/layouts/collapses-to-icons.md) layout uses it this way. ```html ... ... ``` ## Height The skins make it 3.5rem high (`--site-header-height`, set on `.site-header`): a minimum, so a breadcrumb that wraps on a narrow screen makes it taller. ## Attributes Attributes of ``: A header bar: a `header` laying out its content in a row. Across the top of the page (inside `sl:sidebar-provider`, before `sl:sidebar-inset`) it is the header layout's: a `sl:sidebar-trigger` that opens the menu on a phone, the application's name, the `sl:sidebar` with `placement="header"` as a row of links, and the `end` slot. At the top of `sl:sidebar-inset` it is the page's header in the sidebar layout: the trigger, a vertical `sl:separator` and a `sl:breadcrumb`. The `end` slot (search, the theme toggle, the signed-in user) goes to the end of the row. `sl:site-header` declares no props; every attribute passes through.