home-assistant.io/source/dashboards/views.markdown

title, description

title	description
Views	A view is a tab inside a dashboard.

A View is a tab inside a dashboard. To display cards on the UI you have to define them in views.

You can add a view to your user interface, by clicking the menu (three dots at the top right of the screen) and then Edit Dashboard. Click the + button in the top menu bar.

Use titles and icons to describe the content of views.

Path

You can link to one view from a card in another view when using cards that support navigation (navigation_path). The string supplied here will be appended to the string /lovelace/ to create the path to the view. Do not use special characters in paths. Do not begin a path with a number. This will cause the parser to read your path as a view index.

Example

View configuration:

- title: Living room
  # the final path is /lovelace/living_room
  path: living_room

Picture card configuration:

- type: picture
  image: /local/living_room.png
  tap_action:
    action: navigate
    navigation_path: /lovelace/living_room

View icon

If you define a view icon, the icon instead of the title will be displayed, the title will then be used as a tool-tip.

Example

- title: Garden
  icon: mdi:flower

Visible

You can specify the visibility of views as a whole or per-user. (Note: This is only for the display of the tabs. The URL path is still accessible)

Example

views:
  - title: Ian
    visible:
      - user: 581fca7fdc014b8b894519cc531f9a04
    cards:
      ...
  - title: Chelsea
    visible:
      - user: 6e690cc4e40242d2ab14cf38f1882ee6
    cards:
      ...
  - title: Admin
    visible: db34e025e5c84b70968f6530823b117f
    cards:
      ...

Options For Visible

If you define visible as objects instead of a boolean to specify conditions for displaying the view tab:

{% configuration badges %} user: required: true description: User ID that can see the view tab (unique hex value found on the Users configuration page). type: string {% endconfiguration %}

Type

You can change the layout of a view by using a different view type. The default is masonry.

Example

- title: Map
  type: panel
  cards:
    - type: map
      entities:
        - device_tracker.demo_paulus
        - zone.home

Theme

Set a separate theme for the view and its cards.

Example

- title: Home
  theme: happy

Background

You can style the background of your views with a theme. You can use the CSS variable lovelace-background. For wallpapers you probably want to use the example below, more options can be found here.

Example

# Example configuration.yaml entry
frontend:
  themes:
    example:
      lovelace-background: center / cover no-repeat url("/local/background.png") fixed

Subview

A "View" can be marked as "Subview". Subviews won’t show up in the navigation bar on top of the sidebar. Subviews can, for instance, be used to show detailed information; you could link to this subview from a page with a clean look with only basic information (by using cards that support the navigate action). Think of a view with a few thermostats and a subview with status information on the heating/cooling device.

When on the subview, the navigation bar only shows the name of the subview and a back button (no icon is shown). By default, clicking on back button will navigate to the previous view but a custom back path (back_path) can be set.

You can access subviews from other parts of your dashboard by using cards that support the navigate action.

Example

Simple subview:

- title: Map
  subview: true

Subview with custom back path:

- title: Map
  subview: true
  back_path: /lovelace/home

{% configuration views %} views: required: true description: A list of view configurations. type: list keys: type: required: false description: The type of the view. type: string default: masonry title: required: true description: The title or name. type: string badges: required: false description: List of entities IDs or badge objects to display as badges. Note that badges do not show when view is in panel mode. type: list cards: required: false description: Cards to display in this view. type: list path: required: false description: Paths are used in the URL. type: string default: view index icon: required: false description: Icon-name from Material Design Icons. You can use any icon from Material Design Icons. Prefix the icon name with mdi:, ie mdi:home. Only for "View", not for "Subview". type: string background: required: false description: Style the background using CSS. type: string theme: required: false description: Themes view and cards. type: string visible: required: false description: "Hide/show the view tab from all users or a list of individual visible objects." type: [boolean, list] default: true subview: required: false description: Mark the view as "Subview". type: boolean default: false back_path: required: false description: Only for "Subview". Path to navigate when clicking on back button. type: string {% endconfiguration %}

Example

View configuration:

- title: Living room
  badges:
    - device_tracker.demo_paulus
    - entity: light.ceiling_lights
      name: Ceiling Lights
      icon: mdi:bulb
    - entity: switch.decorative_lights
      image: /local/lights.png

Subview configuration:

- title: "Energieprijzen"
  path: "energieprijzen"
  subview: true
  back_path: "/ui-data/climate"

  cards:
    - type: entities
      entities:
        - sensor.today_avg_price