Navigation & banners
A full-width menu, breadcrumbs, the service phase banner, and a consent-first cookie banner.
Menu
A minimal “mega menu” — one toggle opens a full-width panel showing all navigation at once, grouped into sections. With no JavaScript the panel stays open, so every link is still reachable.
Show code
<DsmuMenu toggle-label="Browse topics" :sections="[
{ heading: 'Money & tax', items: [{ label: 'Income tax', href: '/income-tax' }] },
{ heading: 'Health', items: [{ label: 'Find a hospital', href: '/hospitals' }] },
]" />Breadcrumbs
Show code
<DsmuBreadcrumbs :items="[
{ label: 'Home', href: '/' },
{ label: 'Services', href: '/services' },
{ label: 'Apply for a permit' },
]" />Phase banner
Show code
<DsmuPhaseBanner phase="beta">
This is a new service — your <a href="/feedback">feedback</a> will help improve it.
</DsmuPhaseBanner>Cookie banner
DPA-2017-aware: a service should set no non-essential cookies until the user chooses. Clicking a button emits accept or reject and hides the banner.
Show code
<DsmuCookieBanner @accept="onAccept" @reject="onReject">
We use essential cookies to make this service work. We'd also like to set
analytics cookies to help us improve it.
</DsmuCookieBanner>