Vertical list of links with flexible layout and styling options. Renders a semantic `<ul>` containing...

Vertical list of links with flexible layout and styling options. Renders a semantic `<ul>` containing `ed-link-list-item` children. Supports multiple variants (secondary, display-default), spacing (condensed), sizing (sm), and responsive/horizontal layout behaviors. Commonly used in megamenus, sidebars, footers, and general navigation. **Layout modes**: - Default (no behavior): Vertical stack, responsive to screen size - `behavior="horizontal"`: Horizontal wrapping flex layout on all screens - `behavior="responsive"`: Vertical stack that converts to horizontal on large screens **Styling**: - `variant="secondary"`: Subtle visual treatment for secondary link lists - `variant="display-default"`: Enhanced display styling for prominent link lists - `inverted`: Light text on dark backgrounds - `size="sm"`: Reduced typography size - `spacing="condensed"`: Tighter vertical spacing between items **Composition**: Pairs with `ed-link-list-item` children. Items support an `itemAfter` slot for badges, icons, or other trailing content. **Use cases**: - Megamenu content columns (use `spacing="condensed"` for compact display) - Footer link groups - Sidebar navigation - Related links sections

<ed-link-list></ed-link-list>

Properties

Name Type Default Description
behavior String 'responsive' | 'horizontal' Vertical list of links with flexible layout and styling options. Renders a semantic `<ul>` containing `ed-link-list-item` children. Supports multiple variants (secondary, display-default), spacing (condensed), sizing (sm), and responsive/horizontal layout behaviors. Commonly used in megamenus, sidebars, footers, and general navigation. **Layout modes**: - Default (no behavior): Vertical stack, responsive to screen size - `behavior="horizontal"`: Horizontal wrapping flex layout on all screens - `behavior="responsive"`: Vertical stack that converts to horizontal on large screens **Styling**: - `variant="secondary"`: Subtle visual treatment for secondary link lists - `variant="display-default"`: Enhanced display styling for prominent link lists - `inverted`: Light text on dark backgrounds - `size="sm"`: Reduced typography size - `spacing="condensed"`: Tighter vertical spacing between items **Composition**: Pairs with `ed-link-list-item` children. Items support an `itemAfter` slot for badges, icons, or other trailing content. **Use cases**: - Megamenu content columns (use `spacing="condensed"` for compact display) - Footer link groups - Sidebar navigation - Related links sections / export class EdLinkList extends EdElement { static get styles() { return unsafeCSS(styles); } /** Behavioral variant <ed-text-passage size="sm"> <ul> <li>**responsive** renders a horizontal wrapping link list that converts to a stacked link list on large screens</li> <li>**horizontal** renders a horizontal wrapping link list on all screens</li> </ul> </ed-text-passage>
inverted Boolean boolean Inverted variant 1) Used for dark backgrounds
size String 'sm' Size variants <ed-text-passage size="sm"> <ul> <li>**sm** renders a link list with a smaller typography</li> </ul> </ed-text-passage>
spacing String 'condensed' Spacing between link list items <ed-text-passage size="sm"> <ul> <li>**condensed** renders a link list with a more compact display</li> </ul> </ed-text-passage>
variant String 'secondary' Style variants <ed-text-passage size="sm"> <ul> <li>**secondary** renders a link list with a more subtle visual treatment</li> </ul> </ed-text-passage>

Slots

Name Description
- `ed-link-list-item` children

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/link-list/link-list.ts