Secondary Navigation Item

<cw-secondary-navigation-item> | CwSecondaryNavigationItem

Since 1.3

experimental

A link in a <cw-secondary-navigation>, pointing to a page related to the current one.

Overview

Installation

<cw-secondary-navigation>
  <cw-secondary-navigation-item href="/docs/overview" current>Overview</cw-secondary-navigation-item>
  <cw-secondary-navigation-item href="/docs/installation">Installation</cw-secondary-navigation-item>
</cw-secondary-navigation>

import { CwSecondaryNavigation, CwSecondaryNavigationItem } from '@cordwainer/cw-elements/dist/react';

const App = () => (
  <CwSecondaryNavigation>
    <CwSecondaryNavigationItem href="/docs/overview" current>
      Overview
    </CwSecondaryNavigationItem>
    <CwSecondaryNavigationItem href="/docs/installation">Installation</CwSecondaryNavigationItem>
  </CwSecondaryNavigation>
);

Additional demonstrations can be found in the secondary navigation examples.

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/secondary-navigation-item/secondary-navigation-item.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/secondary-navigation-item/secondary-navigation-item.js';

To import this component using a bundler:

import '@cordwainer/cw-elements/dist/components/secondary-navigation-item/secondary-navigation-item.js';

To import this component as a React component:

import CwSecondaryNavigationItem from '@cordwainer/cw-elements/dist/react/secondary-navigation-item';

Slots

Name	Description
(default)	The item’s label content (text, or an icon + text).

Learn more about using slots.

Properties

Name	Description	Type	Default
`href`	The URL to navigate to.	`string \| undefined`	-
`target`	Tells the browser where to open the link. Only used when `href` is set.	`'_blank' \| '_parent' \| '_self' \| '_top' \| undefined`	-
`rel`	The `rel` attribute for the link. Only used when `href` is set.	`string`	`'noreferrer noopener'`
`current`	Indicates this item represents the current page. Reflects `aria-current="page"` on the internal link. The component has no router/URL awareness — consumers set this explicitly based on their own routing state.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name	Description
`base`	The component’s base wrapper.
`link`	The internal `<a>`, present only when `href` is set.

Learn more about customizing CSS parts.