--- title: Header path: components/header status: Stable source: 'https://github.com/primer/css/tree/master/src/header' bundle: header --- Use the Header component to create a header that has all of it's items aligned vertically with consistent horizontal spacing. ## Table of Contents ## Header The `.Header` class is the wrapping class that aligns all the items properly and gives the header it's dark background. Each direct child of the `.Header` component is expected to be a `.Header-item` component. The component utilizes flexbox CSS to align all these items properly and applies spacing scale margin. ```html title="Header"
<%= octicon "mark-github", class: "mr-2", height: 32 %> GitHub
Menu
@octocat
``` ## Header-item All items directly under the `.Header` component should be a `.Header-item` component. Inside these components can be anything (text, forms, images...), and the `.Header-item` component will make sure these elements vertically align with each other. `.Header-item` elements have a built-in margin that will need to be overridden with the `mr-0` utility class for the last element in the container. We relied on the utility classes here instead of `:last-child` because the last child isn't always the item visible. On responsive pages, there's a mobile menu that gets presented to the user at smaller breakpoints. ```html title="Header-item"
Text item
@octocat
``` ### Header-item--full The `.Header-item` element has a modifier class, `.Header-item--full`, that stretches it to fill the available space and push any remaining items to the right. ```html title="Header-item--full"
Item 1
Item 2
Item 3
``` ## Header-link Add the `.Header-link` class to any anchor tags in the header to give them consistent styling and hover opacity. This class makes the links white, bold and 70% fade on hover. ```html title="Header-link"
About
Releases
Team
```