Primary navigation component for main site/app navigation. Renders a semantic `<nav>` element wrapping a vertical list...

Primary navigation component for main site/app navigation. Renders a semantic `<nav>` element wrapping a vertical list of navigation items. Adapts responsively: vertical layout on mobile, horizontal at md breakpoint and above. Supports `ed-primary-nav-item` children which can be simple links or dropdown megamenus. Use as the main top-level navigation in headers. Typically composed within: `ed-header` > `ed-layout-container` > `ed-nav-container` > `ed-primary-nav` **Responsive behavior**: Items stack vertically on small screens and shift to horizontal layout at the md breakpoint. Use `behavior="side-by-side"` to force horizontal layout on all screen sizes. **Megamenu support**: Wrap megamenu content (grids, link lists, headings) inside `ed-primary-nav-item` with `megaMenu` attribute. Toggling opens/closes the panel. **Accessibility**: Semantic `<nav>` with `aria-label="Main Navigation"` and `<ul>` list structure for screen readers.

<ed-primary-nav></ed-primary-nav>

Properties

Name Type Default Description
behavior String 'side-by-side' Primary navigation component for main site/app navigation. Renders a semantic `<nav>` element wrapping a vertical list of navigation items. Adapts responsively: vertical layout on mobile, horizontal at md breakpoint and above. Supports `ed-primary-nav-item` children which can be simple links or dropdown megamenus. Use as the main top-level navigation in headers. Typically composed within: `ed-header` > `ed-layout-container` > `ed-nav-container` > `ed-primary-nav` **Responsive behavior**: Items stack vertically on small screens and shift to horizontal layout at the md breakpoint. Use `behavior="side-by-side"` to force horizontal layout on all screen sizes. **Megamenu support**: Wrap megamenu content (grids, link lists, headings) inside `ed-primary-nav-item` with `megaMenu` attribute. Toggling opens/closes the panel. **Accessibility**: Semantic `<nav>` with `aria-label="Main Navigation"` and `<ul>` list structure for screen readers. / export class EdPrimaryNav extends EdElement { static get styles() { return unsafeCSS(styles); } /** Behavior variant <ed-text-passage size="sm"> <ul> <li>**side-by-side** keeps the primary nav item always in a horizontal pattern</li> </ul> </ed-text-passage>

Slots

Name Description
- The primary navigation items (ed-primary-nav-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/primary-nav/primary-nav.ts