How to Customize the Layout of your R Shiny Apps

Would you like to know how to fully control the layout of your R shiny applications in a easy way?

Today you will learn how to:

• create a simple R Shiny User Interface (UI) Layout;
• how to add a sidebar with inputs;
• add multiple rows, columns, tabs and pages in R Shiny;
• add a theme and fully customize colors and fonts;
• and more…

Download all R code by joining my newsletter on felixanalytix.com. Once you subscribed you will receive an automatic email with the URL of my GitHub account, where you can download all the R scripts of my tutorials.

Create a Single Page Layout

Single page layouts are the bread and butter of Shiny applications. They provide a straightforward way to present all your Shiny app components on one page.

Here’s a example using the starwars dataset from the dplyr R package:

Single Page Layout R code

Single Page Layout R Shiny app

The users can interact with a dropdown menu to select a character from the starwars dataset and view details in a DataTable from the “DT” R package. This layout is effective for applications that require a simple interface with minimal user navigation.

We will see later how to add different tabs as well as various pages in your Shiny app.

How to add multiple rows in Shiny

For more complex apps, multi-row layouts allow you to place elements in multiple rows and columns using fluidRow() and column().

R script for multiple rows in R Shiny

example of creating multiple rows in R Shiny

This layout divides the page into two rows: the first with two plots side by side, and the second with a full-width data table. These functions allow to structure easily multiple visual components in your Shiny app.

How to use tabPanel in Shiny

If you create Shiny applications with a lot of elements, the function tabsetPanel() and tabPanel() offers a compact solution by structuring content into clickable tabs.

R code using tabPanel in Shiny

R Shiny example with multiple panels

Each tabPanel() holds a different content type: a plot, a text summary, and a data table. This is helpful for users who need to switch between different types of information within the same app.

Multiple pages with a navbar in R Shiny

For applications with more content, creating multiple pages simplifies the navigation using navbarPage() and tabPanel() functions.

R code for multiple pages in R Shiny

Example of multiple pages with an navbar in R Shiny

In this example we use navbarMenu() for a hierarchical menu system, providing users a straightforward way to navigate through different sections of your dashboard.

Using Bootstrap with R Shiny

Shiny uses Bootstrap under the hood to ensure websites are mobile-ready and rendering well. You can customize the appearance using various bootwatch themes with the bs_theme() function of the “bslib” R package.

The bslib::bs_theme() function allows customization with Bootswatch themes. This example uses the “Cerulean” theme for a fresh, modern look.

Theming your R Shiny app with bslib

The bslib R package enables further customization by adjusting parameters like colors and fonts beyond the default Bootswatch theme.

R Code to change background, foreground and primary color of an R shiny app

Background, foreground and primary color customized of an R shiny app

This customized theme changes the background, foreground, and primary colors, creating a new design that reflects a unique aesthetic for your own dashboards.

Download all R code by joining my newsletter on felixanalytix.com. Once you subscribed you will receive an automatic email with the URL of my GitHub account, where you can download all the R scripts of my tutorials.