17 Dashboards

Just like you can use Quarto to create documents, websites, books, etc., you can also use it to create dashboards. The dashboards gallery is a great place to peruse some dashboard examples made in Quarto. As you do so, pay attention to whether they’re organized with content in columns first and then broken into rows or in rows first and then broken into columns. This thinking process will help you design your own dashboards as well.

A Quarto dashboard is a single notebook (either .qmd or .ipynb) where format: dashboard.

17.1 Dashboard basics

Dashboards are composed of cards. Cards can be arranged into rows and columns. Pages, tabsets, and sidebars allow for more advanced layouts.

---
title: "My first Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

17.2 Components

Navigation bar and pages, sidebars, rows and columns, tabsets, and cards.

17.2.1 Navigation bar and pages

Icon, title, and author along with links to sub-pages if more than one page is defined.

First-level headings (H1) define pages linked from the navigation bar.

The navigation bar also houses the logo and other navigation buttons, which are all defined in the document YAML under dashboard.

For the logo, use the logo YAML field. We recommend placing images in a designated folder (e.g., images) but you can define any image path for the logo.

dashboard.qmd

---
title: "Logo"
format: 
  dashboard:
    logo: images/beetle.png
---

In addition to a logo

17.2.2 Sidebars

Sidebars are mostly used for for interactive inputs but can also be for informational material and they can be at the global (dashboard) level or the page level.

For a global sidebar, use a first-level heading. While it doesn’t matter where in your source code you define the sidebar, it’s good practice to define it at the top of the document after the document-level YAML.

dashboard.qmd

---
title: "Sidebar - Global"
format: dashboard
---

# {.sidebar}

Information and/or interactivity tools that you want visible on the side of every dashboard page.

# Page 1

Content for Page 1.

# Page 2

Content for Page 2.

For a page-level sidebar, use a second-level heading under the first-level heading for the page you want the sidebar visible. While it doesn’t matter where within that page’s source code you define the sidebar, it’s good practice to define it at the top of the source code for the given page, after the first-level header for the page.

You can design a dashboard that has a sidebar on some pages and not others. You can also design a dashboard with different sidebars on each page. Page-level sidebars must be defined within that page (between the first-level heading for the given page and the next).

dashboard.qmd

---
title: "Sidebar - Page"
format: dashboard
---

# Page 1

## {.sidebar}

Information and/or interactivity tools that you want on Page 1.

##

Content for Page 1.

# Page 2

## {.sidebar}

Information and/or interactivity tools that you want on Page 2.

##

Content for Page 2.

If you would like the same sidebar to appear on some pages but not others, and do so without repeating the necessary code, you can define it in a separate document and { include } it in your dashboard pages where needed.

_sidebar.qmd

Content that will go on the shared sidebar.

dashboard.qmd

---
title: "Sidebar - Page"
format: dashboard
---

# Page 1

## {.sidebar}

{{ include _sidebar.qmd}}

##

Content for Page 1.

# Page 2

Content for Page 2, no sidebar.

# Page 3

## {.sidebar}

{{ include _sidebar.qmd}}

##

Content for Page 3.

17.2.3 Rows and columns

Rows and columns using markdown heading, with optional attributes to control height, width, etc.

17.2.4 Tabsets

Tabsets to further divide content.