vertical items (compact windows) — items equally fill the bar; badges overlap the icon
Page content
horizontal items (medium windows) — fixed-width pills centered in the bar
Page content
orientation="auto" — vertical below 600px viewport,
horizontal at/above (resize the window)
Page content
RTL — item order and arrow keys follow the reading direction; disabled item is skipped by keyboard navigation
محتوى الصفحة
Sample usage
<!-- 3–5 primary destinations, bottom of the window. Clicking an item makes
it the single active one (activation="manual" to opt out). Never pair a
navigation bar with a navigation rail in the same window. -->
<material-navigation-bar orientation="auto">
<material-navigation-item icon="home" label="Home" active></material-navigation-item>
<material-navigation-item icon="explore" label="Explore">
<material-badge slot="badge" value="12"></material-badge>
</material-navigation-item>
<material-navigation-item icon="person" label="Profile"></material-navigation-item>
</material-navigation-bar>
<!-- typical placement: sticky at the bottom of a compact layout -->
<style>
material-navigation-bar { position: sticky; bottom: 0; }
</style>