NavDropdownColumn

Open this component in Storybook ↗

The <dsgn-nav-dropdown-column> component groups links into one vertical column inside a <dsgn-nav-link> dropdown. It has no props — it exists to give the dropdown its column structure, and it is the unit dropdown-columns counts.

Usage

<dsgn-nav-link href="/products" dropdown-columns="2">
  Products
  <dsgn-nav-dropdown-column slot="dropdown">
    <dsgn-nav-link href="/products/ui" subheading="Web components"
      >UI</dsgn-nav-link
    >
    <dsgn-nav-link href="/products/tokens" subheading="Design tokens"
      >Tokens</dsgn-nav-link
    >
  </dsgn-nav-dropdown-column>
  <dsgn-nav-dropdown-column slot="dropdown">
    <dsgn-nav-link href="/products/cli" subheading="Scaffolding"
      >CLI</dsgn-nav-link
    >
  </dsgn-nav-dropdown-column>
</dsgn-nav-link>

Import the component module in your application entrypoint:

import '@ds-gn/ui/nav-link';
import '@ds-gn/ui/nav-dropdown-column';

Props

This component takes no props. Its theming comes from the <dsgn-nav-link> elements inside it.

Slots

Usage patterns

• Always assign it to the parent link’s dropdown slot, and set that link’s dropdown-columns to the number of columns you slot in — the count drives the desktop layout, and mobile stacks the groups into a single column regardless.
• Links inside a column render in their dropdown-item styling automatically; the column detects nothing else, so keep other content out of it.