Site Header
Examples
Basic Header
Header with Navigation
Custom Title Slot
Importing
Slots
Properties
Parts
Dependencies

Site Header

<terra-site-header> | TerraSiteHeader

Since 1.0

stable

Site headers provide a consistent navigation structure at the top of pages.

<terra-site-header site-name="Terra UI"></terra-site-header>

Examples

Basic Header

A basic header with just the site name.

<terra-site-header site-name="My Site"></terra-site-header>

Header with Navigation

A header with navigation in the center slot.

Data

Topics

<terra-site-header site-name="Terra UI">
    <terra-site-navigation slot="center">
        <terra-dropdown placement="bottom-start" distance="3" hover>
            <terra-button slot="trigger" size="medium" variant="text" caret>
                Data
            </terra-button>
            <terra-menu role="menu">
                <terra-menu-item value="catalog">
                    <a href="#">Data Catalog</a>
                </terra-menu-item>
                <terra-menu-item value="alerts">
                    <a href="#">Data Alerts</a>
                </terra-menu-item>
            </terra-menu>
        </terra-dropdown>
        <terra-dropdown placement="bottom-start" distance="3" hover>
            <terra-button slot="trigger" size="medium" variant="text" caret>
                Topics
            </terra-button>
            <terra-menu role="menu">
                <terra-menu-item value="atmosphere">
                    <a href="#">Atmosphere</a>
                </terra-menu-item>
                <terra-menu-item value="ocean">
                    <a href="#">Ocean</a>
                </terra-menu-item>
            </terra-menu>
        </terra-dropdown>
    </terra-site-navigation>
</terra-site-header>

Custom Title Slot

You can customize the title slot with a link or other content.

Terra UI

About

<terra-site-header>
    <a slot="title" href="/" style="text-decoration: none; color: inherit;">Terra UI</a>
    <terra-site-navigation slot="center">
        <terra-dropdown placement="bottom-start" distance="3" hover>
            <terra-button slot="trigger" size="medium" variant="text" caret>
                About
            </terra-button>
            <terra-menu role="menu">
                <terra-menu-item value="overview">
                    <a href="#">Overview</a>
                </terra-menu-item>
            </terra-menu>
        </terra-dropdown>
    </terra-site-navigation>
    <div slot="right" style="display: flex; align-items: center; gap: var(--terra-spacing-small);">
        <button type="button" style="background: transparent; border: none; color: var(--terra-color-spacesuit-white); cursor: pointer; padding: var(--terra-spacing-2x-small);">
            <terra-icon name="search" library="heroicons"></terra-icon>
        </button>
    </div>
</terra-site-header>

[component-metadata:terra-site-header]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/site-header/site-header.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/site-header/site-header.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/site-header/site-header.js';

To import this component as a React component:

import TerraSiteHeader from '@nasa-terra/components/dist/react/site-header';

Slots

Name	Description
`title`	The site title displayed next to the logo. Defaults to the `site-name` prop value.
`center`	Content displayed in the center of the header (e.g., navigation).
`right`	Content displayed on the right side of the header. Defaults to a search icon button.

Learn more about using slots.

Properties

Name	Description	Reflects	Type	Default
`siteName` `site-name`	The default site name displayed in the title slot if no content is provided.		`string`	`''`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name	Description
`base`	The component’s base wrapper.
`logo`	The NASA logo container.
`title`	The site title container.
`center`	The center content container.
`right`	The right content container.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<terra-icon>