Header bar<mds-header-bar>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
menuenumSets the visibility type of the hamburger menu
navenumSets the visibility type of the navigation menu
Overview
The <mds-header-bar> web component is the top bar of a Magma application layout: it holds the product branding on the left and the primary navigation actions on the right, collapsing those actions into a hamburger menu on smaller viewports. It is a structural compound element, typically nested inside an <mds-header>, with no native HTML primitive equivalent.
Semantic Behavior
Branding region: The default (unnamed) slot is the logo/branding area on the left; place text, HTML, or components such as a logo with a short description here.Navigation region: The nav named slot holds the horizontal desktop actions, wrapped in a real <nav> element; mds-button elements are the recommended children.Conditional nav rendering: The <nav> is shown only when nav is not 'none' and a slot="nav" child is present, also when it is added after the first render, so an empty header collapses cleanly.Hamburger trigger: When menu is not 'none' the component renders a menu button that opens the menu on click, icon-only and named in the page language (the lang of <html>) (“Open menu”).Open event: Clicking the hamburger emits the bubbling mdsHeaderBarOpen event and opens the drawer on the surrounding mds-header.Imperative open control: The public setOpened(isOpened = true) method only records the opened state: it renders nothing and does not open or close the drawer, which is driven by setOpened() on the surrounding mds-header.
Properties & Visual Configurations
The two props are both responsive visibility switches sharing the value set 'all' | 'desktop' | 'mobile' | 'none', where the value names the breakpoint(s) at which the region is shown ('none' hides it entirely, 'all' always shows it).menu controls when the hamburger button appears. It defaults to 'mobile', so the collapsed menu surfaces only on small screens; set it to 'all' to always expose the menu trigger or 'none' to suppress it.nav controls when the inline horizontal navigation is shown. It defaults to 'desktop', the typical complement to menu: links sit inline on wide viewports and fold into the hamburger on narrow ones.Inside mds-header both are written by the header from its own menu and nav when it loads, replacing the values set on the bar: set them on mds-header there.