Dashboard Options

Format

The following document and format options are either dashboard-specific or have special behavior within dashboards (note that in addition to these options all standard HTML Format options are available):

Option	Description
title	Title (displayed in top left of navigation bar)
author	Author (displayed alongside title in smaller font)
logo	Logo (displayed left of the title in the navigation bar)
orientation	rows or columns (default: rows)
scrolling	Use scrolling rather than fill layout? (default: false)
expandable	Make card content expandable (default: true)
theme	Dashboard theme (built in or custom scss)
nav-buttons	Buttons to appear on the right side of the navigation bar. Use linkedin, facebook, reddit, twitter, github, or a custom Nav Item.

For example:

---
title: "Dashboard"
author: "Acme, Inc."
logo: images/acme.png
format:
  dashboard:
     theme: default
     orientation: rows
     expandable: true
     scrolling: false
     nav-buttons:
      - reddit
      - icon: gitlab
        href: https://gitlab.com/
---

Pages

Pages can specify a custom orientation that is distinct from the global orientation:

Option	Description
orientation	rows or columns (default to global orientation)
scrolling	true or false (defaults to global scrolling)

For example:

---
title: "Dashboard"
format: dashboard
---

# Plots {orientation="columns" scrolling="true"}

Sidebars

Create Sidebars by applying the .sidebar attribute to a level 1 heading (for global sidebars) or level 2 heading (for page level sidebars).

Class	Description
.sidebar	Contents should be arranged into a sidebar

For example:

---
title: "Dashboard"
format: dashboard
---

# Plots {.sidebar}

Rows & Columns

Rows and columns support options for customizing their layout and sizing behavior. The following classes can be used to modify layout behavior:

Class	Description
.tabset	Contents should be arranged into a Tabset
.fill	Contents should fill available layout space
.flow	Contents should flow to their natural size

Note that in most dashboards, .fill and .flow are determined automatically based on the contents of cards and don’t need to be specified manually.

The following attributes can be used for explicit sizing:

Option	Description
width	Percentage or absolute pixel width (default distributes space evenly across elements in a row)
height	Percentage or absolute pixel height (default distributes space evenly across elements in a column)

For example:

---
title: "Dashboard"
format: dashboard
---

## Row {height="65%"}

## Row {height="35%"}

Note that if some components specify an explicit width or height and others do not, then remaining space will be distributed evenly across those elements.

Cards

Card options enable you to specify a title and various layout behaviors:

Option	Description
title	Title displayed in card header
padding	Padding around card content (default: 8px)
expandable	Make card content expandable (default: true)
width	Percentage or absolute pixel width (default distributes space evenly across elements in a row)
height	Percentage or absolute pixel height (default distributes space evenly across elements in a column)
fill	Whether the card should fill it’s container or ‘flow’, matching the height of its content. (Quarto determines the default value based upon the card contents)

For example:

```{python}
#| title: "Life Expectancy"
#| padding: 3px
#| expandable: false
#| width: 70%
```

These same options can be applied to .card divs. For example:

::: {.card title="Life Expectancy" padding="3px"}
This is the content.
:::

Value Boxes

Value Boxes support the following options:

Option	Description
title	Title displayed above value
icon	Icon identifier from bootstrap icons
color	Background color—this can be any CSS color or one of the theme specific color aliases (see below)
value	Main display value

Available themed aliases for color include:

Color Alias	Default Theme Color(s)
primary	Blue
secondary	Gray
success	Green
info	Bright Blue
warning	Yellow/Orange
danger	Red
light	Light Gray
dark	Black

Note that value box options can be specified either as cell options or by printing a dict() (for Python) or list() (for R) (this is helpful when options need to be dynamic). See the Value Boxes component documentation for details.