About Project Overview Contributing Getting Started Installation Usage Themes Customizing Frameworks React Vue Angular GitHub Light Dark System

Site Navigation

<terra-site-navigation> | TerraSiteNavigation
Since 1.0 stable

Site navigation provides a flexible navigation structure with dropdown menus.

Data Data Catalog Data Alerts 
<terra-site-navigation>
    <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-site-navigation>

Examples

Basic Navigation

A simple navigation with dropdown menus.

Data Data Catalog Data Alerts and Outages Projects Topics Atmosphere Ocean 
<terra-site-navigation>
    <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 and Outages</a>
            </terra-menu-item>
            <terra-menu-item value="projects">
                <a href="#">Projects</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>

Full-Width Navigation

Use the full-width attribute to enable full-width dropdown panels that span the entire viewport.

Data

Data

Data Catalog

Browse and search for Earth science data.

Data Alerts

Stay informed about data outages and updates.

Projects

Explore data projects and initiatives.

 Topics Atmosphere Ocean 
<terra-site-navigation full-width>
    <terra-dropdown placement="bottom-start" distance="3" hover>
        <terra-button slot="trigger" size="medium" variant="text" caret>
            Data
        </terra-button>
        <div style="padding: var(--terra-spacing-large); background: var(--terra-panel-background-color); color: var(--terra-color-carbon-90);">
            <h3 style="margin-top: 0;">Data</h3>
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--terra-spacing-large);">
                <div>
                    <h4>Data Catalog</h4>
                    <p>Browse and search for Earth science data.</p>
                </div>
                <div>
                    <h4>Data Alerts</h4>
                    <p>Stay informed about data outages and updates.</p>
                </div>
                <div>
                    <h4>Projects</h4>
                    <p>Explore data projects and initiatives.</p>
                </div>
            </div>
        </div>
    </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>

Custom Dropdown Content

You can use any content in the dropdown slots, including custom HTML or other Terra components.

Custom Menu

Custom Content

You can put any content here, including custom HTML, forms, or other components.

Action Button 
<terra-site-navigation>
    <terra-dropdown placement="bottom-start" distance="3" hover>
        <terra-button slot="trigger" size="medium" variant="text" caret>
            Custom Menu
        </terra-button>
        <div style="padding: var(--terra-spacing-medium); min-width: 300px;">
            <h4 style="margin-top: 0;">Custom Content</h4>
            <p>You can put any content here, including custom HTML, forms, or other components.</p>
            <terra-button variant="primary" size="small">Action Button</terra-button>
        </div>
    </terra-dropdown>
</terra-site-navigation>

[component-metadata:terra-site-navigation]

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-navigation/site-navigation.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-navigation/site-navigation.js';

To import this component using a bundler:

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

To import this component as a React component:

import TerraSiteNavigation from '@nasa-terra/components/dist/react/site-navigation';

Slots

Name Description
(default) Navigation items. Can contain <terra-dropdown> elements or any custom navigation content.

Learn more about using slots.

Properties

Name Description Reflects Type Default
fullWidth
full-width 		When true, dropdowns use full-width panels instead of normal list-based navigation. boolean false
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.

Learn more about customizing CSS parts.