# Navigation in the header > For an application with a handful of pages, the pages as a row of links in the site header and the page as a card below it; on a phone the same navigation is a panel. Source: https://shadleaf.dev/current/layouts/header/ For an application with a handful of pages. The [site header](https://shadleaf.dev/current/components/site-header.md) holds the menu button (on a phone), the application's name, the pages as a row of links, and the theme toggle and the [user menu](https://shadleaf.dev/current/components/user-menu.md) at the end. The page is a card below the header (`variant="inset"`). The row is a ``. On a phone the menu button opens that same navigation as a panel, with the icons and the parts marked `panel-only`: here the panel's own header and a More group (Settings, Help). Switch the preview to Phone to see it. **Example: Navigation in the header.** For an application with a handful of pages: the pages as a row of links in the site header, the page as a card below it, the theme toggle and the signed-in user's menu at the end. On a phone the menu button opens the same navigation as a panel, with its icons and the panel-only parts. For reference: Flux's [header layout](https://fluxui.dev/layouts/header) this layout is based on. ## The layout The whole layout file, with what [every layout needs](https://shadleaf.dev/current/components/application-shell.md#what-every-layout-needs). It is the layout of the second sample application (sample-02's `layout/main.html`, which runs under a strict Content-Security-Policy). Sample-02 also has an Admin link for admins only, left out here: see [Navigation by role](https://shadleaf.dev/current/components/application-shell.md#navigation-by-role). ```html Page Acme Acme Enterprise Home Forms Overlays Data More Settings Help Settings

``` In the row, the links show their labels without icons and the current page is marked as in a sidebar; group actions, separators and collapsible items are left out of the row, and the menu button is hidden on a desktop. When the links do not fit, the row scrolls sideways. See [In the header](https://shadleaf.dev/current/components/sidebar.md#in-the-header) and [Panel-only parts](https://shadleaf.dev/current/components/sidebar.md#panel-only-parts). ## A page A page passes its title and its content: ```html
...
``` ## The CSS The square behind the logo in the panel's header, and the page in the card, kept to a readable width: ```css /* The square behind the logo in the panel's header. */ .app-logo { display: grid; place-items: center; flex-shrink: 0; inline-size: 2rem; block-size: 2rem; border-radius: calc(var(--radius) - 2px); background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); } .app-logo > svg { inline-size: 1rem; block-size: 1rem; } /* The page in the card, kept to a readable width. */ .page { max-width: 48rem; padding: 1.5rem 1rem 2rem; } .page > h1 { margin-block-end: 1rem; font-size: 1.75rem; font-weight: 600; } ```