The header and sidebar
1. The header and sidebar
Let's define the header and sidebar.2. The header
The header is like a restaurant signboard. It can contain the dashboard title. We can add dropdown menus containing different items. They can be messages, notifications and tasks. This isn't too different from the front end of a restaurant, which can be simple or complex.3. The shinydashboard title
The header is defined by dashboardHeader. Let's set up an example with a title called "Soccer tournament". Conventionally, this is stored as header. What if we want a longer title? In that case, the title will overflow and will partly become obscured. The solution is to set the titleWidth argument to an appropriate number of pixels, where the default header is 230 pixels wide. In doing so, the title will be extended beyond the width of the sidebar to accommodate the additional width.4. Adding a dropdown menu with a message
We can add dropdown menus to the header. There are three types of dropdown menus -- messages, notifications and tasks. Let's look at dropdown menus containing messages by adding a dropdownMenu in dashboardHeader and then setting the type to "messages". Adding a message amounts to adding a messageItem. Let's add one called "Data division". Without setting anything else, the icon is that of "user" by default but this can be changed by setting the icon argument. Text can be added to messageItem, and is displayed upon rendering the shinydashboard. We can set the time argument to display the time elapsed, which is kept static in this example. In practice, these elements are dynamic. At a different time, different messages can be displayed. A dropdown menu is then rendered at the top right hand corner.5. Adding a dropdown menu with multiple messages
As we have already seen, a shinydashboard is highly modular. New elements are added by adding objects in the appropriate places. We can add another messageItem within dropdownMenu, called "Twitter", and change its icon to that of twitter.6. Adding a dropdown menu with multiple items
In this dropdown menu, we can add other types of items. We can add a notificationItem and a taskItem. These items appear differently. While the default icon for messageItem is that of "user", the default icon for notificationItem is that of "exclamation-triangle", and taskItem has no icon but contains a progress bar.7. Adding a dropdown menu with multiple items
Here is what those items look like. A notificationItem contains a quick message, and hence does not require additional text. A taskItem contains a brief description of the task and its progress.8. Adding more dropdown menus
We can add more dropdown menus. Let's add a notification menu containing one notification item. This is then rendered in the shinydashboard.9. The sidebar
The sidebar is defined by dashboardSidebar, and is typically stored as sidebar. Its width can also be adjusted to be in line with the header width. We can add a sidebarMenu, which allows us to place several pages in a shinydashboard. Let's construct a sidebar with two buttons to go between two pages called "charts" and "stats". This is done so by placing two menuItems in sidebarMenu. We can also disable the sidebarMenu if it's unwanted.10. Adding a badge
We can also add a badge to each button, which takes the form of short colored text. This is achieved by setting the badgeLabel and badgeColor arguments.11. Adding subtabs
We can add subtabs by adding menuSubItem to the sidebar. Badges cannot be added to a tab containing subtabs.12. Adding inputs and outputs in the sidebar
We can add outputs and inputs in the sidebar too. This means that we also have to define the outputs and inputs in our server function. Let's add a checkboxGroupInput in a new menuItem, which will be rendered like it does in a shinyApp.13. Let's practice!
It's your turn to add the header and sidebar to your shinydashboard!Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.