Layout

Configuration options for the navbar layout and behavior.

Name	Type	Default	Description
`auto_padding`	Auto Padding	-	Add padding to your Home Asistant 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 Assistnat 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`	Padding in pixels for desktop mode (applied to left/right based on position)
`mobile_px`	number	`80`	Padding in pixels for mobile mode (applied to 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

Auto Padding​

Example​

Auto Padding

Example