sp-top-nav
Attributes and Properties #
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
| compact | Boolean | | The collection of tabs take up less space |
dir | dir | 'ltr' | 'rtl' | 'ltr' | |
| quiet | Boolean | | The tabs border is a lot smaller |
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 #
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;"
>
<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>