@spectrum-web-components/top-nav

Description

<sp-top-nav> delivers site navigation, particularly for when that navigation will change the majority of the page's content and/or the page's URL when selected. All primary elements of an <sp-top-nav> should be directly accessible in the tab order.

Usage

yarn add @spectrum-web-components/top-nav

Import the side effectful registration of <sp-top-nav> and <sp-top-nav-item> as follows:

import '@spectrum-web-components/top-nav/sp-top-nav.js';
import '@spectrum-web-components/top-nav/sp-top-nav-item.js';

When looking to leverage the TopNav or TopNavItem base classes as a type and/or for extension purposes, do so via:

import { TopNav, TopNavItem } from '@spectrum-web-components/top-nav';

Example

<sp-top-nav>
    <sp-top-nav-item href="#">Site Name</sp-top-nav-item>
    <sp-top-nav-item href="#page-1" style="margin-inline-start: auto;">
        Page 1
    </sp-top-nav-item>
    <sp-top-nav-item href="#page-2">Page 2</sp-top-nav-item>
    <sp-top-nav-item href="#page-3">Page 3</sp-top-nav-item>
    <sp-top-nav-item href="#page-4">Page with Really Long Name</sp-top-nav-item>
    <sp-action-menu
        label="Account"
        placement="bottom-end"
        style="margin-inline-start: auto;"
        quiet
    >
        <sp-menu-item>Account Settings</sp-menu-item>
        <sp-menu-item>My Profile</sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>Share</sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>Help</sp-menu-item>
        <sp-menu-item>Sign Out</sp-menu-item>
    </sp-action-menu>
</sp-top-nav>

Changelog

1.6.0 (2025-05-01) — (f2b6a32)

Minor Fixes

• icons-workflow: added missing S2 icons

Patch Fixes

• slider: ensure tracks become properly rounded when offset variant is activated
• popover: prevent overflow clipping in Safari with translateZ and visible tips
• picker: fix focus to prevent setting focus on menu items when opened via mouse
• button: update deprecation warning to allow variant and static-color to coexist
• number-field: fix UI issues and improve width calculation
• tooltip: add DelayedTooltipWithOverlay story for handling interactions
• infield-button, number-field, textfield, search, styles: update disabled border colors and styling across components
• close-button, dropzone, illustrated-message, menu, status-light, styles, switch, table, tabs, toast, tooltip: remove unnecessary system theme references
• overlay: fix layout issues in Safari for nested trays in dialogs