Layout

Configuration options for the navbar layout and behavior.

Name	Type	Default	Description
`auto_padding`	Auto Padding	-	Add padding to your Home Assistant dashboard to prevent overlaps
`reflect_child_state`	`boolean`	-	Determines if each route item should be displayed as selected when any of its popup items is selected

Auto Padding

Automatically adds padding to your Home Assistant dashboard to prevent cards from overlapping with navbar-card. This eliminates the need for manual CSS padding adjustments in your Home Assistant theme.

Name	Type	Default	Description
`enabled`	boolean	`true`	Whether to automatically add padding to prevent overlaps
`desktop_px`	number	`100`	Base padding in pixels for desktop mode (applied to the side or edge defined by your `desktop.position`)
`mobile_px`	number	`80`	Base padding in pixels for mobile mode (applied to the bottom of the view)
`media_player_px`	number	`100`	Extra padding reserved when the media player widget is visible (added to desktop top/bottom and mobile bottom)

note

The desktop_px padding is automatically applied to the appropriate side of the screen based on your navbar's desktop.position setting.

Example

type: custom:navbar-card
layout:
  reflect_child_state: true
  auto_padding:
    enabled: true
    desktop_px: 100
    mobile_px: 80
    media_player_px: 100

Auto Padding​

Example​

Auto Padding

Example