Examples API

Attributes and Properties #

Property Attribute Type Default Description label label string '' quiet quiet boolean false The Top Nav is displayed without a border. selected selected string | undefined selectionIndicatorStyle selectionIndicatorStyle noSelectionStyle

Slots #

Name Description default slot Nav Items to display as a group

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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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-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 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>
        style="margin-inline-start: auto;"
        <sp-menu-item>Account Settings</sp-menu-item>
        <sp-menu-item>My Profile</sp-menu-item>
        <sp-menu-item>Sign Out</sp-menu-item>