#Sample page headers with grid upgrade
#Sample page headers with grid code

Each unit of offset increases the left-margin of a column by a whole column. You can move columns to the right by adding the offset parameter to the column() function. It’s also possible to offset the position of columns to achieve more precise control over the location of UI elements. The first parameter to the column() function is it’s width (out of a total of 12 columns). To illustrate, here’s the sidebar layout implemented using the fluidRow(), column() and wellPanel() functions: ui <- fluidPage ( titlePanel ( 'Hello Shiny!' ), fluidRow ( column ( 4, wellPanel ( sliderInput ( 'bins', label = 'Number of bins:', min = 1, value = 30, max = 50 ) ) ), column ( 8, plotOutput ( 'distPlot' ) ) ) ) Column widths are based on the Bootstrap 12-wide grid system, so should add up to 12 within a fluidRow() container. Rows are created by the fluidRow() function and include columns defined by the column() function. The familiar sidebarLayout() described above makes use of Shiny’s lower-level grid layout functions.

For example, to position the sidebar to the right you would use this code: sidebarLayout ( position = 'right', sidebarPanel ( # Inputs excluded for brevity ), mainPanel ( # Outputs excluded for brevity ) ) Grid Layout Note that the sidebar can be positioned to the left (the default) or right of the main area.

#Sample page headers with grid code

Here’s the code used to create this layout: ui <- fluidPage ( titlePanel ( 'Hello Shiny!' ), sidebarLayout ( sidebarPanel ( sliderInput ( 'bins', label = 'Number of bins:', min = 1, value = 30, max = 50 ) ), mainPanel ( plotOutput ( 'distPlot' ) ) ) ) This layout provides a sidebar for inputs and a large main area for output: The sidebar layout is a useful starting point for most applications.

#Sample page headers with grid upgrade

To upgrade to a more recent version and/or implement custom Bootstrap themes, check out the application themes article. Segmenting layouts using the tabsetPanel() and navlistPanel() functions.Ĭreating applications with multiple top-level components using the navbarPage() function.Īll these features are made available via Bootstrap, an extremely popular HTML/CSS framework (though no prior experience with Bootstrap is assumed). This guide describes the following application layout features:Ī sidebarLayout(): for placing a sidebarPanel() of inputs alongside a mainPanel() output content.Ĭustom layouts using Shiny’s grid layout system (i.e., fluidRow() & column()). Shiny includes a number of facilities for laying out the components of an application.