Light Dark System

Primary Navigation Item

<cw-primary-navigation-item> | CwPrimaryNavigationItem
Since 1.3 experimental

A top-level entry in a <cw-primary-navigation>, rendered as a link or, when it has a <cw-primary-navigation-menu> slotted in, a disclosure trigger for a dropdown of sub-links. Above the parent navigation’s mobile breakpoint, the dropdown is a floating panel; below it, the menu expands inline, full width, in place — matching the rest of the mobile hamburger menu.

Home Products Shoes Boots 
<cw-primary-navigation>
  <cw-primary-navigation-item href="/" current>Home</cw-primary-navigation-item>
  <cw-primary-navigation-item>
    Products
    <cw-primary-navigation-menu slot="menu">
      <a href="/">Shoes</a>
      <a href="/">Boots</a>
    </cw-primary-navigation-menu>
  </cw-primary-navigation-item>
</cw-primary-navigation>

import { CwPrimaryNavigation, CwPrimaryNavigationItem, CwPrimaryNavigationMenu } from '@cordwainer/cw-elements/dist/react';

const App = () => (
  <CwPrimaryNavigation>
    <CwPrimaryNavigationItem href="/" current>
      Home
    </CwPrimaryNavigationItem>
    <CwPrimaryNavigationItem>
      Products
      <CwPrimaryNavigationMenu slot="menu">
        <a href="/">Shoes</a>
        <a href="/">Boots</a>
      </CwPrimaryNavigationMenu>
    </CwPrimaryNavigationItem>
  </CwPrimaryNavigation>
);

Slot a <cw-primary-navigation-menu> into the menu slot to turn an item into a disclosure trigger for a dropdown of sub-links instead of a plain link. Above the parent <cw-primary-navigation>’s mobile-breakpoint, that dropdown floats below the trigger; below it, the menu instead expands inline and full width in place, matching the rest of the mobile hamburger menu. See Submenus on Mobile on the header page for a live example of that mobile behavior.

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/primary-navigation-item/primary-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/primary-navigation-item/primary-navigation-item.js';

To import this component using a bundler:

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

To import this component as a React component:

import CwPrimaryNavigationItem from '@cordwainer/cw-elements/dist/react/primary-navigation-item';

Slots

Name Description
(default) The item’s label content (text, or an icon + text).
menu A <cw-primary-navigation-menu> with this item’s dropdown links. Its presence switches the item from a link to a disclosure trigger. Ignored when href is also set.

Learn more about using slots.

Properties

Name Description Reflects Type Default
open Whether the item’s dropdown is currently open. Always false for link/plain items. boolean false
href The URL to navigate to. When set, the item renders as a link. Mutually exclusive with a slotted dropdown menu. 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
mobile Set automatically by the parent <cw-primary-navigation> when it’s in its mobile, hamburger-toggled layout — switches a dropdown menu from a floating panel to an inline, full-width disclosure. Not intended to be set directly. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
cw-show onCwShow Emitted when the item’s dropdown opens. -
cw-after-show onCwAfterShow Emitted after the item’s dropdown opens and all animations are complete. -
cw-hide onCwHide Emitted when the item’s dropdown closes. -
cw-after-hide onCwAfterHide Emitted after the item’s dropdown closes and all animations are complete. -

Learn more about events.

Methods

Name Description Arguments
show() Opens the item’s dropdown, if it has one. No-op for link/plain items. -
hide() Closes the item’s dropdown, if it has one. No-op for link/plain items. -

Learn more about methods.

Parts

Name Description
base The component’s base wrapper.
link The internal <a>, present only when href is set.
trigger The internal <cw-dropdown> above mobile, or the disclosure <button> below it — present only when a dropdown menu is slotted in.
panel The inline menu panel shown below mobile, present only when a dropdown menu is slotted in.

Learn more about customizing CSS parts.

Animations

Name Description
primary-navigation-item.show The animation used when the inline mobile menu opens.
primary-navigation-item.hide The animation used when the inline mobile menu closes.

Learn more about customizing animations.

Dependencies

This component automatically imports the following dependencies.

  • <cw-dropdown>
  • <cw-icon>
  • <cw-popup>