Carson Sievert || Customizing Navigation Items in Shiny using {bslib} || RStudio
00:00 Introduction 00:15 Linking inside navbarPage 01:19 Replacing tabPanel with navbarPage, and navbarMenu 02:32 nav_spacer() 03:41 Adding header and//or footer content 04:07 Replacing tabsetPanel with navs_tab and navs_pill 04:32 navs_tab_card() and navs_pill_card() variants 04:40 Demo of all of the nav_*() functions The bslib R package provides tools for customizing Bootstrap themes directly from R, making it much easier to customize the appearance of Shiny apps & R Markdown documents. bslib’s primary goals are: - To make custom theming as easy as possible. - Custom themes may even be created interactively in real-time. - Also provide easy access to pre-packaged Bootswatch themes. - Make upgrading from Bootstrap 3 to 4 (and beyond) as seamless as possible. (Shiny and R Markdown default to Bootstrap 3 and will continue to do so to avoid breaking legacy code.) - Serve as a general foundation for Shiny and R Markdown extension packages. (Extensions such as flexdashboard, pkgdown, and bookdown already fully support bslib’s custom theming capabilities.) You can read more about bslib here: https://rstudio.github.io/bslib/articles/bslib.html And you can learn more about Shiny here: https://shiny.rstudio.com/ Got questions? The RStudio Community site is a great place to get assistance: https://community.rstudio.com/ Content: Carson Sievert (@cpsievert) Design & editing: Jesse Mostipak (@kierisi)
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Right, so we've got our basic Shiny navbar page, and pretty much any navbar page that you've seen, you've probably noticed that you're constricted to the fact that each one of these tab links has to link to content inside of that page. So we haven't really provided you with a way to like officially provide another link here that maybe links to some external website. Or what if you wanted to like have a right aligned nav item that links to like a login page or something like that. Historically, there's been no way to do this officially with Shiny. So I've seen people come up with pretty crazy hacks to make this possible, which was part of the motivation for doing this in the first place.
The new bslib nav API
But bslib, you know, provides this new API, essentially, that replaces tab panel, and navbar page and navbar menu, kind of the basic building blocks that you may have used to create a navbar page or a tab set panel or something like that. So with the new interface, it's called, instead of tab panel, you say nav, give it a title, give it some content. There's also a nav item, it basically just takes whatever you give it, and places it directly in that nav heading. So you could do something like provide a hyperlink to Shiny's GitHub page, or wherever you want to provide a link to. There's actually also ways of using this to include something like text input box, which would allow you to implement something like a search feature in your Shiny app, where somebody could type in like in the navbar at the top, they could search for something. And then you could wire that up to some server logic to like show something as people are typing, something like that.
There's also this nav spacer, where it's kind of like the name suggests, it just adds spacing in between like one set of nav items and another set of nav items. So by putting the nav spacer here, this will basically left align all of this, all of these, like the A and the B and the Shiny external link. And then it will right align this nav menu that has other like, you know, links to more content within the page, and then another nav item to link to some other external content. And this is kind of a fancy way of reducing duplication for example, where this nav items function will return a list of these nav items, essentially, so that I can use this rlang splicing operator to essentially splice in the list of nav items into this navbar page.
There's also another argument to navbar that allows you to, like if you have some content that you want to show regardless of what nav item is selected in a navbar page, you can use, there's a header and a footer to say like, always show this content, like above or below the other content that is dependent on whatever tab is selected.
navs_tab, navs_pill, and card variants
So I'm using that to also show these other functions that can consume a collection of nav items called navs tab, navs pill. So these two functions essentially replace tab set panel for, you know, creating that basic like tab look, or also with pills. And there's also variants on these called navs tab card and navs pill card, which I'll just show you how these actually look.
So here's the first navs tab here. So this is like, you know, the kind of classic tab set panel look that we're used to seeing everywhere with the ability to flip through the tab A and tab B content. I also have this shiny link here, which will take me to shiny's GitHub page, as well as the right aligned menu with the other external link and some other content. So I've taken the same nav items essentially and placed them inside of this page navbar to get the top level A and B content. So I can flip back and forth here. And then this is the footer content with those other sort of variants for rendering a collection of nav items.
So here's the navs tab, the navs pill. I do like this kind of a little bit generally better than the basic tab set panel look in general. But I think part of the reason why like tab set panel doesn't always look great is the fact that there is no padding between this content here and the border. And there's also border doesn't extend around the content either. So it kind of looks like there's content sort of floating in space. And it's also smashed together. So that's why we've provided this navs tab card and navs pill card to add some border around all of the content and add some padding between that like top border and the actual content inside. So for all sort of functional purposes, these provide the same sort of functional experience. But this is just designed in a slightly different way where it has like a real container around it.
But I think part of the reason why like tab set panel doesn't always look great is the fact that there is no padding between this content here and the border. And there's also border doesn't extend around the content either. So it kind of looks like there's content sort of floating in space.
It has sort of a real header to it in the sense that it's got this gray background around holding the tabs and the pills. And you may have seen something like this already with I believe in Shiny, this is called nav list panel. But I'm now calling it navs pill list. And there might be like in the future, there might be other different variants that like render things in slightly different ways. But this is kind of like more of like a sidebar kind of approach where you can get those nav items stacked vertically and then the content on the right.
So yeah, and actually, these functions are now used by Shiny underneath the hood when you use tab panel or nav bar page. So now the actual logic for all of that stuff lives inside of bslib. But we've also like sort of built out the API to allow you to do more with it and sort of design this functional interface to allow us to continue building like more ways to render navigation items, essentially.
