sp-top-nav

NPM 1.5.0

View Storybook

Try it on webcomponents.dev
Overview API Changelog

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>
    <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>

Attributes and Properties

Property Attribute Type Default Description ignoreURLParts ignore-url-parts string '' A space separated list of part of the URL to ignore when matching for the "selected" Top Nav Item. Currently supported values are `hash` and `search`, which will remove the `#hash` and `?search=value` respectively. 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

Patch Changes

  • Updated dependencies [c7efe31]:
    • @spectrum-web-components/tabs@1.5.0
    • @spectrum-web-components/base@1.5.0
    • @spectrum-web-components/shared@1.5.0

1.4.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/tabs@1.4.0
    • @spectrum-web-components/base@1.4.0
    • @spectrum-web-components/shared@1.4.0

1.3.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/tabs@1.3.0
    • @spectrum-web-components/base@1.3.0
    • @spectrum-web-components/shared@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/top-nav

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/top-nav

1.1.1 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/top-nav

1.1.0 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/top-nav

1.0.3 (2024-12-09)

Note: Version bump only for package @spectrum-web-components/top-nav

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/top-nav

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/top-nav

0.49.0 (2024-10-15)

Note: Version bump only for package @spectrum-web-components/top-nav

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/top-nav

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/top-nav

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/top-nav

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/top-nav

0.47.0 (2024-08-20)

Features

  • breadcrumbs: add Breadcrumbs component (#4578) (acd4b5e)

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/top-nav

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/top-nav

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/top-nav

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/top-nav

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/top-nav

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/top-nav

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/top-nav

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/top-nav

0.42.1 (2024-04-02)

Bug Fixes

  • shared: ensure the "updateComplete" in Focusable is stable (885b4a5)

0.42.0 (2024-03-19)

Note: Version bump only for package @spectrum-web-components/top-nav

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/top-nav

0.41.1 (2024-02-22)

Bug Fixes

  • top-nav: focus loupe on :focus-visible only (50d6870)

0.41.0 (2024-02-13)

Note: Version bump only for package @spectrum-web-components/top-nav

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/top-nav

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/top-nav

0.40.3 (2024-01-11)

Bug Fixes

  • top-nav: allow consumers to "ignore-url-parts" or "search" or "hash" (#3923) (83bf70b)

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/top-nav

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/top-nav

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/top-nav

0.39.4 (2023-11-02)

Bug Fixes

  • top-nav: default to role="navigation", sprout aria-label when "label" applied (bbcea4a)

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/top-nav

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/top-nav

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/top-nav

0.39.0 (2023-09-25)

Note: Version bump only for package @spectrum-web-components/top-nav

0.38.0 (2023-09-05)

Note: Version bump only for package @spectrum-web-components/top-nav

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/top-nav

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/top-nav

0.35.0 (2023-07-31)

Note: Version bump only for package @spectrum-web-components/top-nav

0.34.0 (2023-07-11)

Features

  • tabs,top-nav: use Core Tokens (c6ba355)

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/top-nav

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/top-nav

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/top-nav

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/top-nav

0.30.0 (2023-05-03)

Bug Fixes

  • add tabs sizes to TopNav (159bc89)
  • correct @element jsDoc listing across library (c97a632)
  • include default export in the "exports" fields (f32407d)
  • include the "types" entry in package.json files (b432f59)
  • lint away debugger statements (34a498e)
  • proper overflow rtl support (9b1c9d4)
  • remove usage where deprecated (387db3b)
  • tabs: add "tablist" part to manage list styles (bbf8074)
  • tabs: correct indicator size by scaling from 100px (a3fb68b)
  • top-nav: ensure focus state in all contexts (6de83be)
  • top-nav: initialize nav with an undefined selection (3473f63)
  • top-nav: match indicator management strategy from Tabs (ecc76a0)
  • top-nav: minor edits to description, typos (bc2ee48)
  • top-nav: prototype top-nav pattern (9708f6f)
  • update indicator animation for loading and content direction (f607f8b)
  • use icons without "size" values (3fc7c91)
  • use typescript@^4.5 for "native" document.fonts typings (a3e4aea)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • include all Dev Mode files in side effects (f70817c)
  • sets action-menu quiet to false by default, fixes #3040 (8414cab)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • tabs: add sp-tab-panel element (b17d276)
  • use latest exports specification (a7ecf4b)

Performance Improvements

  • reduce render cycles when managing "dir" attribute (7b28309)

0.7.2 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/top-nav

0.7.1 (2023-04-05)

Performance Improvements

  • reduce render cycles when managing "dir" attribute (7b28309)

0.7.0 (2023-03-22)

Bug Fixes

  • add tabs sizes to TopNav (159bc89)
  • proper overflow rtl support (9b1c9d4)

Features

  • sets action-menu quiet to false by default, fixes #3040 (8414cab)

0.6.13 (2023-03-08)

Note: Version bump only for package @spectrum-web-components/top-nav

0.6.12 (2023-02-21)

Note: Version bump only for package @spectrum-web-components/top-nav

0.6.11 (2023-02-08)

Bug Fixes

  • tabs: correct indicator size by scaling from 100px (a3fb68b)

0.6.10 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/top-nav

0.6.9 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/top-nav

0.6.8 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/top-nav

0.6.7 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/top-nav

0.6.6 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/top-nav

0.6.5 (2022-10-28)

Note: Version bump only for package @spectrum-web-components/top-nav

0.6.4 (2022-10-17)

Note: Version bump only for package @spectrum-web-components/top-nav

0.6.3 (2022-10-10)

Note: Version bump only for package @spectrum-web-components/top-nav

0.6.2 (2022-09-14)

Note: Version bump only for package @spectrum-web-components/top-nav

0.6.1 (2022-08-24)

Bug Fixes

  • top-nav: match indicator management strategy from Tabs (ecc76a0)

0.6.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.5.15 (2022-08-04)

Bug Fixes

  • tabs: add "tablist" part to manage list styles (bbf8074)

0.5.14 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/top-nav

0.5.13 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/top-nav

0.5.12 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/top-nav

0.5.11 (2022-05-27)

Note: Version bump only for package @spectrum-web-components/top-nav

0.5.10 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/top-nav

0.5.9 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/top-nav

0.5.8 (2022-03-30)

Note: Version bump only for package @spectrum-web-components/top-nav

0.5.7 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/top-nav

0.5.6 (2022-03-04)

Note: Version bump only for package @spectrum-web-components/top-nav

0.5.5 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/top-nav

0.5.4 (2022-02-02)

Note: Version bump only for package @spectrum-web-components/top-nav

0.5.3 (2022-01-26)

Bug Fixes

  • top-nav: ensure focus state in all contexts (6de83be)

0.5.2 (2022-01-07)

Note: Version bump only for package @spectrum-web-components/top-nav

0.5.1 (2021-12-13)

Bug Fixes

  • use typescript@^4.5 for "native" document.fonts typings (a3e4aea)

0.5.0 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/top-nav

0.4.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/top-nav

0.4.0 (2021-11-02)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.3.10 (2021-10-12)

Note: Version bump only for package @spectrum-web-components/top-nav

0.3.9 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/top-nav

0.3.8 (2021-09-13)

Note: Version bump only for package @spectrum-web-components/top-nav

0.3.7 (2021-08-24)

Bug Fixes

  • correct @element jsDoc listing across library (c97a632)

0.3.6 (2021-08-03)

Note: Version bump only for package @spectrum-web-components/top-nav

0.3.5 (2021-07-22)

Note: Version bump only for package @spectrum-web-components/top-nav

0.3.4 (2021-07-01)

Bug Fixes

  • update indicator animation for loading and content direction (f607f8b)

0.3.3 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/top-nav

0.3.2 (2021-06-07)

Bug Fixes

  • lint away debugger statements (34a498e)

0.3.1 (2021-05-25)

Note: Version bump only for package @spectrum-web-components/top-nav

0.3.0 (2021-05-24)

Features

  • tabs: add sp-tab-panel element (b17d276)

0.2.6 (2021-05-12)

Note: Version bump only for package @spectrum-web-components/top-nav

0.2.5 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/top-nav

0.2.4 (2021-03-29)

Note: Version bump only for package @spectrum-web-components/top-nav

0.2.3 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/top-nav

0.2.2 (2021-03-22)

Bug Fixes

  • remove usage where deprecated (387db3b)

0.2.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/top-nav

0.2.0 (2021-03-04)

Features

  • use latest exports specification (a7ecf4b)

0.1.4 (2021-02-11)

Note: Version bump only for package @spectrum-web-components/top-nav

0.1.3 (2021-02-02)

Note: Version bump only for package @spectrum-web-components/top-nav

0.1.2 (2021-01-28)

Note: Version bump only for package @spectrum-web-components/top-nav

0.1.1 (2021-01-21)

Bug Fixes

  • top-nav: minor edits to description, typos (bc2ee48)
  • include the "types" entry in package.json files (b432f59)
  • use icons without "size" values (3fc7c91)
  • top-nav: initialize nav with an undefined selection (3473f63)

0.1.0 (2021-01-13)

Bug Fixes

  • include the "types" entry in package.json files (b432f59)
  • use icons without "size" values (3fc7c91)
  • top-nav: initialize nav with an undefined selection (3473f63)

0.0.5 (2020-10-12)

Note: Version bump only for package @spectrum-web-components/top-nav

0.0.4 (2020-10-12)

Bug Fixes

  • include default export in the "exports" fields (f32407d)

0.0.3 (2020-09-25)

Note: Version bump only for package @spectrum-web-components/top-nav

0.0.2 (2020-09-14)

Bug Fixes

  • top-nav: prototype top-nav pattern (9708f6f)