`<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, ty
npm install @spectrum-web-components/top-nav
Refer to the Spectrum Design System documentation for visual design guidelines and the application frame patterns for usage in application contexts.
``bash`
yarn add @spectrum-web-components/top-nav
Import the side effectful registration of and as follows:
`js`
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:
`js`
import { TopNav, TopNavItem } from '@spectrum-web-components/top-nav';
The component consists of the following parts:
- Container ( Other web components, like action menus and/or buttons, can be included in the Setting the For demonstration purposes only, the If implementations wish to ignore certain URL parts when matching for selection, the The #### Sizes - Items are automatically selected based on the current #### ARIA attributes - #### Keyboard interaction - #### Best practices - Always provide a label for the navigation container.): The main navigation container component with role="navigation" that manages nav items and selection states
- Navigation items (): Default slot; individual clickable navigation linksaria-label
- Label: Optional property to set an for the top navigation
- Selection indicator: A visual indicator that animates to the selected item
- Divider: Optional divider that acts as the track for the selection indicator`$3
html`
Page 1
slots in order to extend functionality.`html`
Page 1
placement="bottom-end"
style="margin-inline-start: auto;"
quiet
>
property to a URL that matches a top navigation item's resolved href value will render that item selected by default.selected
The value must match the fully resolved URL, not just the href attribute value.href value of the selected top nav item is hardcoded, as opposed to being a dynamic href or a jump link.`html
>
Home
selected
>
About
` can be defined with a space-separated list. Currently supported values are hash and search, which will remove the #hash and ?search=value respectively.`html`
property renders the top navigation component without the bottom border.`html`
html`
Page 1
html`
Page 1
html`
Page 1
html`
Page 1
$3
- Use to ignore hash fragments or search parameters when matchingselected
- Items can be programmatically selected via the propertystyle
- The selection indicator automatically resizes based on item content changes
- Items can be positioned with CSS using CSS via the attribute set on elements (e.g., margin-inline-start: auto)role="navigation"$3
is automatically applied to the top nav containerlabel
- The property set on will set an aria-label for screen readersaria-current="page"
- Selected items receive should move focus between all navigation items in a logical tab orderEnter
- selects navigation itemshref` values that match actual page URLs for automatic selection.
- Use semantic
- Provide meaningful text content for navigation items - avoid icon-only items without labels.