Hey guys,
Today I will show how to insert a navigation menu into your streamlit app. In the first example, we will place the navigation
inside the sidebar. And afterwards, we will place it directly
on the main page. Ok, and without further ado, let us get started. For this tutorial, I have prepared a simple
streamlit app that displays a title. To create the navigation menu, we need to
install an additional library. Therefore open up your command prompt or terminal
and type "pip install streamlit-option-menu". I will, of course, also leave the link to
the documentation for this module in the description box below. With that out of the way, I will import "option
menu" from "streamlit option menu". For the first example, I will insert a navigation
menu inside the sidebar. The module is very straightforward. Within the "option menu", there are only two
arguments required. The first one is the menu title and the second
one are the different options you want to display on your app. If the user selects one of the options, it
will be stored my variable called 'selected'. To test it out, I will insert a simple if
condition. In my case, I will just insert a title with
the name of the selection. And with that said, let me save the script
and rerun the web app. As a result, we have got now our navigation
menu. I can now navigate through the different options,
and the title will change accordingly. If you do not want to Display the menu title,
you could set it to 'None'. In that case, the navigation will look like
this. Now let us take a look at the optional arguments. For each item in your options list, you could
specify an icon. You can find all available icons on the bootstrap
website. I will also include the link to the website
in the description box below. All you need is the icon name. In my case, I use the house, book and envelope
icon. Additionally, you could also use an icon for
the menu title. And last but not least, you can set the default_index. So, when you open the web app, which option
should be selected first. The index starts at 0, which is also the default
value for this argument. In that case, the first item, so home, will
be selected. I will also change the menu title as I have
used a menu icon. If we rerun the app, we can now see the different
icons. For the second example, I will place the navigation
bar horizontally on the main page. So let me copy this part to my clipboard and
comment out the rest. After pasting it below the previous example,
I need to insert an additional argument to set the orientation to horizontal. And now, if I rerun the app, we have the following
navigation bar. Let me also set the menu title to none, as
I do not need it here. I think this looks already pretty slick. However, if you want to customize the look
and feel further, you could do that with the styles argument. I grabbed the following code directly from
the documentation. You could now customize the different elements
of the navigation bar, like the background colour, the font size and so on. Ok, guys, and that is all for this tutorial. As always, if you have any questions, please
let me know in the comments. Thanks for watching, and see you in the next
video.