Shiny Application Layouts – Navbar Page Features

In the fourth part of our series we will see some of the most important features that a Navbar page provides in order to enhance the appearance of our shiny application.

We will use the “Cars” app which we built in Shiny Application Layouts-Navbar Page.

This part can be useful for you in two ways.

First of all, you can see different ways to enhance the appearance and the utility of your shiny app.

Secondly you can make a revision on what you learnt in “Building Shiny App” series as we will build basic shiny staff in order to present it in the proper way.

Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!

Answers to the exercises are available here.

Navbar Arguments

This is a basic navbarPage() function with a title:
#ui.R
navbarPage("Cars")

You can use selected to select the value of the tab that should be selected by default. If NULL, the first tab will be selected.
#ui.R
navbarPage("Cars",selected="tab").

Exercise 1

Change the title to your navigation bar to “Cars App”. Then name it “Cars” again.

Exercise 2

Add value to all of your tabPanel.

Exercise 3

Select the tabPanel of the “Data Table” as default. Then deactivate it.

With position you can choose whether the navbar should be displayed at the top of the page with normal scrolling behavior (“static-top”), pinned at the top (“fixed-top”), or pinned at the bottom (“fixed-bottom”).
#ui.R
navbarPage("Cars",selected="tab",position="fixed-bottom")

Exercise 4

Set the navbar position to “fixed-bottom”. Then deactivate it.

With inverse set to TRUE you will take a black background and light text for the navigation bar.
#ui.R
navbarPage("Cars",selected="tab",position="fixed-bottom",inverse= T)

Exercise 5

Change the color of the navigation bar to black.

If you set collapsible to TRUE the navigation elements are collapsed into a menu when the width of the browser is less than 940 pixels.
#ui.R
navbarPage("Cars",selected="tab",position="fixed-bottom",inverse= T,collapsible =T)

Exercise 6

Collapse your navigation elements.

You can set fluid to TRUE to use a fluid layout.
#ui.R
navbarPage("Cars",selected="tab",position="fixed-bottom",inverse= T,collapsible =T,fluid =T)

Exercise 7

Set fluid to FALSE.

You can also use headerPanel() to create an application title.Look at the example:
#ui.R
tabPanel("Plot", value = "pl",headerPanel("PLOT"), sidebarLayout( sidebarPanel( radioButtons("plote", "Plot", c("Scatter"="p", "Line"="l") ) ), mainPanel( plotOutput("plot") ) ))

Exercise 8

Create four headerPanel(). One for every tabPanel and name them as the respective tabPanel.

You can use position in your sidebarLayout to place the sidebar from left to right. Look at the example:
#ui.R
sidebarLayout(position="right", sidebarPanel( radioButtons("plote", "Plot", c("Scatter"="p", "Line"="l") ) ), mainPanel( plotOutput("plot") ) )

Exercise 9

Move your sidebar to the right.

You can also name your navbarMenu like this:
#ui.R
navbarMenu("Others","TITLE",

Exercise 10

Giva a title to your navbarMenu.