navbar Shiny App

The navbarPage layout for Shiny apps is incredibly useful as it provides a horizontal navigation element to the top of the page (like on this page) that allows lots of content to be organised sensibly within one app. This means you could replace a website with a Shiny app in its entirety!

In this document the basic IDN navbarPage template is introduced, which looks like this:

Template features

Highlevel features are as follows:

• Tabbed content
• RMarkdown is used to generate the “About” page, allowing code output to be included in text easily
• Optionally, a “Popout” control is added to the top-right of the navbar which is a link to open the shiny app in a new tab.

Why use this template?

The popout button is very useful for Shiny apps that are to be inserted into pages as iframes which might be too small to display the Shiny app to its fullest - opening the app in a new tab removes the furniture of the containing page.

To enable the popout control, simply add the following to the Shiny app URL:

youraccount.shinyapps.io/shinyapp/?allowPopout=true

Template tutorial

The template is split into the following directories/files:

shinyApp |
- ui.R # navbarPage() containing all UI elements
- server.R # "active" part of the code
- url_allowPopout.R # logic for displaying the "popout" control in the navbarPage
- tab_about.Rmd # Text displayed in the "About" tab, note cannot include server-dependent code.
- www |
------- animate.min.css # CSS that provides "pulsating" effect to loading text
------- loading-content.css # CSS that styles "loading panes" to be transparent

Note that there are dedicated tutorials for the main features of the application:

• Pulsating loading pane
• Optional popout button

This app does not utilise reactive expressions to control the update order of Shiny content. If your Shiny app will include these features, you may find this tutorial useful - https://ox-it.github.io/OxfordIDN_Shiny-App-Templates/advanced-shiny-features/reactive-expressions/