Packs Free ComponentsHeader Bar (Simple) FREE

Pack style

Dashboard

lvgl:
  pages:
    - id: component_preview
      bg_color: 0x08142D
      bg_opa: 100%
      widgets:
        - obj:
            id: shb_bar
            x: 0
            y: 0
            width: 300
            height: 36
            bg_color: 0x070E1B
            bg_opa: 95%
            border_width: 0
            radius: 0
            widgets:
              - label:
                  id: shb_title
                  x: 14
                  y: 8
                  width: 180
                  height: 20
                  text: 'Dashboard'
                  text_color: 0xF1F5F9
                  text_font: montserrat_16
                  text_align: LEFT

300 × 36

Presets6

Layout3

Layout

Dimensions

Width

Height

Header Bar (Simple) - ESPHome LVGL Navigation for ESP32

Simple top navigation bar with title and optional WiFi/battery status icons. The essential screen structure component.

Use the live preview to tweak parameters, then click Open in Designer to drop Header Bar (Simple) into your project. The designer exports clean ESPHome LVGL YAML you can paste into any ESP32 firmware configuration - works with ILI9341, ST7789, ST7796, GC9A01 and other supported displays.

Related: header, bar, navigation, title, wifi, battery, top.

Available in Free Components pack

Need help with the YAML?

Step-by-step guide

Getting started with ESPHome + LVGL