feat(component-library): implement mt-nav component

[Alastair Fraser (alastair-simon)]

What

Adds mt-nav, a sidebar navigation component for Shopware apps.

Why

Every Shopware app built its own nav menu, each slightly different. A shared component:

• makes the menu look and behave the same everywhere
• solves the fiddly parts once (which branch opens, hidden active rows, keyboard focus)
• is accessible by default
• does not depend on a specific router

How

Structure

The app passes the menu as data through the sections prop. mt-nav is the only public component; it renders two internal parts:

• mt-nav-section: a group of rows below an optional header
• mt-nav-item: one row, which nests through children (up to three levels)

What a row renders depends on its fields:

• to: a link through linkComponent (router-link by default)
• href: a plain anchor, with an external-link icon and a screen reader hint when it opens in a new tab
• children and no to: a folder button that opens and closes its rows

Props, events and slots

• sections: the menu data (NavSection[])
• linkComponent: the component used for to links
• label: accessible name of the landmark, defaults to a translated "Main navigation"
• isActive: a function that decides which row is the current page, so sections can stay static. Setting active on a row also works.
• navigate event: emitted on link clicks, not on folder toggles
• suffix slot: rendered after each row label, e.g. for a badge or counter

Behaviour

• Active page: the active row is highlighted, the branch holding it opens and the others close
• Hidden active rows: a closed folder takes over the highlight of an active row inside it
• Open branches: only one top-level branch is open at a time; nested folders remember their own open state
• Keyboard: arrow keys move focus between visible links, Home and End jump to the first and last, no wrapping
• Layout: fills its container, scrolls internally and fades at the top and bottom edges; there is no collapsed mode
• Translations: English and German

Rows are told apart by an optional id, falling back to the label.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
meteor-docs	Ready	Preview	Oct 9, 2026 2:42pm UTC
meteor-storybook	Ready	Preview	Oct 9, 2026 2:42pm UTC

changes complete

[pkg-pr-new]

Open in StackBlitz

@shopware-ag/meteor-admin-sdk

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-admin-sdk@1386

@shopware-ag/meteor-component-library

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-component-library@1386

@shopware-ag/create-meteor-extension

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/create-meteor-extension@1386

@shopware-ag/meteor-icon-kit

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-icon-kit@1386

@shopware-ag/meteor-prettier-config

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-prettier-config@1386

@shopware-ag/stylelint-plugin-meteor

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/stylelint-plugin-meteor@1386

@shopware-ag/meteor-tokens

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-tokens@1386

commit: 834526a