Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-navigation-bar-item>
A single destination inside a lit-material-navigation-bar — an icon in a
pill-shaped active indicator, with a small label below it, following the
MD3 navigation bar item spec. Visually and structurally almost identical
to lit-material-navigation-rail-item (same icon-pill + label-below
layout, badge slot, ripple/focus-ring scoped to the indicator) — the
difference is this item shares the bar's width equally with its siblings
(flex: 1) instead of filling a narrow vertical rail's width, and its
indicator is 64px wide (the MD3 bar spec) rather than the rail's 56px.
Properties
Property
Attribute
Type
Default
Description
selected
selected
boolean
false
disabled
disabled
boolean
false
href
href
string
""
If set, renders the item as a link (<a>) instead of a <button>.
target
target
string
""
Slots
Slot
Description
default
The label text.
icon
The icon.
badge
Optional badge content (a count or dot), positioned over the icon's top-end corner (top-right in LTR, top-left in RTL).
CSS parts
Part
Description
item
The <button> or <a> (layout only, no background of its own).
icon-container
The pill-shaped active indicator behind the icon.
ripple
The state-layer element the hover/press feedback is drawn on.
focus-ring
The focus indicator element.
<lit-material-navigation-bar>
Material Design 3 navigation bar — a row of primary destinations
(lit-material-navigation-bar-item elements) sharing a bar's width
equally, typically docked to the bottom of the screen for compact window
sizes.
Properties
Property
Attribute
Type
Default
Description
selected
selected
number
-1
Index of the selected item. -1 means no selection.
Events
Event
Description
change
Fires when selected changes via an item click.
Slots
Slot
Description
default
lit-material-navigation-bar-item elements.
CSS parts
Part
Description
bar
The bar (background, height, padding).
<lit-material-navigation-drawer-item>
A single destination inside a lit-material-navigation-drawer — a
pill-shaped row with a leading icon and a label, following the MD3
navigation drawer item spec.
Properties
Property
Attribute
Type
Default
Description
selected
selected
boolean
false
disabled
disabled
boolean
false
href
href
string
""
If set, renders the item as a link (<a>) instead of a <button>.
target
target
string
""
Slots
Slot
Description
default
The label text.
icon
The leading icon.
badge
Optional trailing content (a count or dot).
CSS parts
Part
Description
item
The <button> or <a> row (background/shape).
ripple
The state-layer element the hover/press feedback is drawn on.
focus-ring
The focus indicator element.
<lit-material-navigation-drawer>
Material Design 3 navigation drawer — a vertical panel of primary
destinations (lit-material-navigation-drawer-item elements).
Properties
Property
Attribute
Type
Default
Description
variant
variant
NavigationDrawerVariant
"standard"
position
position
NavigationDrawerPosition
"start"
selected
selected
number
-1
Index of the selected item. -1 means no selection.
open
open
boolean
false
Whether a modal drawer is open. Ignored for standard.
disableBackdropClose
disable-backdrop-close
boolean
false
If set, clicking the backdrop does not close a modal drawer.
Events
Event
Description
close
modal only: re-dispatched from the native close event.
cancel
modal only: re-dispatched from the native cancel event. Cancelable: calling preventDefault() stops the drawer from closing.
change
Fires when selected changes via an item click.
Slots
Slot
Description
default
lit-material-navigation-drawer-item elements.
header
Optional header content (a title, a close button…).
CSS parts
Part
Description
dialog
The native <dialog> element. Only rendered for modal.
drawer
The visible panel (background, width, padding).
header
The header slot's container.
content
The items slot's container.
<lit-material-navigation-rail-item>
A single destination inside a lit-material-navigation-rail — an icon in
a pill-shaped active indicator, with a small label below it, following
the MD3 navigation rail item spec.
Properties
Property
Attribute
Type
Default
Description
selected
selected
boolean
false
disabled
disabled
boolean
false
href
href
string
""
If set, renders the item as a link (<a>) instead of a <button>.
target
target
string
""
Slots
Slot
Description
default
The label text.
icon
The icon.
badge
Optional badge content (a count or dot), positioned over the icon's top-end corner (top-right in LTR, top-left in RTL).
CSS parts
Part
Description
item
The <button> or <a> (layout only, no background of its own).
icon-container
The pill-shaped active indicator behind the icon.
ripple
The state-layer element the hover/press feedback is drawn on.
focus-ring
The focus indicator element.
<lit-material-navigation-rail>
Material Design 3 navigation rail — a narrow, always-visible vertical bar
of primary destinations (lit-material-navigation-rail-item elements),
typically docked to one edge for medium/large window sizes.
Properties
Property
Attribute
Type
Default
Description
alignment
alignment
NavigationRailAlignment
"top"
Where the item group sits within the rail's height.
selected
selected
number
-1
Index of the selected item. -1 means no selection.