Up next in 10
In Streamlit, you can improve the organization of your application by using a sidebar or a container. These tools help to structure content efficiently, making navigation and presentation of information clearer.
Streamlit with Python: How to Create a Sidebar and Container in Streamlit
Article:
💖 Donate and help us create more amazing content!
🙌 Every contribution makes a difference!
☕ Buy me a coffee: https://buymeacoffee.com/usandopython
💖Support this channel
https://www.youtube.com/channel/UCpL2Gru508Z39oPqu1FIg4Q/join
⚡️ Connect with me on:
Instagram: https://www.instagram.com/pybeginners/
Twitter: https://x.com/joaofuti_
LinkedIn Newsletter: https://www.linkedin.com/newsletters/pybeginners-7267881715929415681/
Website: https://www.usandopy.com/en
Thread: https://www.threads.net/@pybeginners
Show More Show Less View Video Transcript
0:00
hello guys welcome back to the channel
0:02
joh H so today we are going to learn
0:03
about a very important topic in stream L
0:07
okay so those topic that we're going to
0:09
learn okay is the one that help us to
0:12
organize our app okay while we are
0:15
building so how we can organize we can
0:17
structure our app okay so in in the way
0:20
for it to look better and very well
0:22
organized okay so I'm talk about how we
0:25
can create a sidebar and a container in
0:28
stream L okay so a Side Bar okay is a
0:32
fixed area on the left side of any app
0:35
okay it is ideal for displaying elements
0:37
such as filters uh settings or
0:40
navigation controls without interfering
0:42
with the main content in your app so in
0:45
order to create a sidebar in stream LS
0:48
we need to do something like this first
0:49
let me delete this thing okay which is
0:51
from the previous app and save this
0:55
let's create a sidebar okay so to create
0:57
a sidebar in stream L you just need to
0:58
call something like this okay let me s
1:00
do
1:02
sidebar okay sidebar so this way we
1:07
create the sidebar okay so in order to
1:10
create a title inside the bar we need to
1:11
something like something like this okay
1:13
sidebar dot title okay open and close
1:17
what I'm going to open so here I need to
1:19
give it the title for my sidebar okay
1:21
let me see app sidebar upside the bar
1:26
so you can give any title that you wish
1:28
okay so I just give I give the this name
1:30
so that is the first one that came on my
1:32
head okay if I refresh this boom as you
1:35
can see now sidebar is activated okay I
1:37
can hide it and I can show it okay even
1:40
for example if I go for a mobile version
1:42
it usually start like this okay I can
1:45
just click this boom it's going to show
1:46
my sidebar and I can hide it again so
1:49
let me go for the web version like this
1:52
let me show my sidebar okay so apart of
1:54
title we can also add things inside of
1:58
sideb so in order to write anything
2:00
inside of Side Bar you just need to
2:02
something like this s do uh side the bar
2:05
I always start with side the bar like
2:08
this okay dot write okay so you need to
2:11
start Side bar so that you can
2:13
understand I need to write this inside
2:15
of the Side Bar okay so when you right
2:17
side bar is like it automatically
2:19
activate the Side Bar then you in front
2:21
you just add whatever you wish okay
2:24
let's say SD do WR write what okay use
2:29
the
2:30
options below use the options below save
2:34
let me save this and if I come here if I
2:37
refresh as you can see now I added some
2:40
here inside of my sidebar okay so apart
2:43
of this I can add some elements inside
2:45
of my sidebars element such as okay let
2:48
me show you I can add element such as
2:50
I'm going to create a variable called
2:52
username okay usern
2:54
name so this usern name will be equal
2:58
St do side the bar okay side thear do
3:04
textor input test input open and close
3:08
so what I'm going to say so here inside
3:11
you you need to do something like this
3:12
okay let's give for enter y enter your
3:17
name dot okay then after getting the
3:21
name let's create some select bottle so
3:23
let's say options
3:27
option so this option can be for s do
3:31
side
3:31
thear side thear dot select box okay
3:36
select box select box select box so this
3:40
select box uh we can give options for
3:43
example like choose a c category let's
3:46
something like this okay choose a
3:49
category choose a category and let's
3:53
give dot here okay let's give a list of
3:57
a
3:58
category so for example we can say like
4:01
technology
4:03
technology okay comma and we can say
4:07
also Health okay
4:11
Health comma and just for the last one
4:14
let's say Finance
4:17
Finance okay perfect save so let's say
4:20
something El
4:22
notify okay so this notify can be
4:24
something like St doar Side Bar dot what
4:30
but uh check box let's use a check box
4:34
check check box open and close what we
4:38
can say and we can say for
4:43
enable
4:45
enable
4:46
notifications enable notifications save
4:49
after these things okay we can do
4:51
something like this okay now first let's
4:53
see what we have okay save if I come
4:55
here if I restart this or refresh we can
4:59
see okay we have one input field for
5:01
here to enter the name uh we can choose
5:04
a category okay inside of the things and
5:07
we can enable notification okay so in
5:09
order for us to get those information
5:11
okay we can do something like this boom
5:13
I can come here for example uh let's say
5:15
that display the selected options okay
5:18
let's say STD do
5:22
header let's open and close and let's
5:24
say something like this okay let's use F
5:26
string and we can say for example
5:28
welcome
5:30
welcome comma welcome who uh let's use
5:34
the username okay the guy that we are
5:36
going to get from here let's welcome
5:39
username okay perfect welcome username
5:43
and we can write also some condition
5:45
here let's say if
5:49
username okay else okay it will come
5:53
username okay if there is a username
5:55
else we can say
5:58
what and we can say something like this
6:00
okay user oh I think it's better to put
6:04
user something like this and they come
6:07
out let's put some this exclamation here
6:10
okay boom save now if I come here let's
6:14
see what we have we get something like
6:15
this okay so if there is no username
6:17
it's going to show like this okay
6:18
welcome for if I enter my name j if I
6:21
click anywhere boom welcome J okay so if
6:23
there is no username boom you just say
6:26
welcome user something like this okay is
6:29
very cool so this is how you can work
6:31
with side bars and to give you more
6:33
options but now let's get something like
6:35
this St do
6:37
right what we're going to write let's
6:40
say let's use F string as always and
6:42
let's say you
6:45
selected dot let's give and let's say uh
6:50
options okay because we are going to get
6:52
the options from there oh sorry option
6:55
it's only singular save now let's check
6:58
what we got if I came if I refresh
7:01
welcome user okay no let's
7:04
say as always if I choose here Health
7:08
boom welcome you selected Health okay if
7:10
I choose technology you selected
7:12
technology okay so this how you can say
7:15
you selected Finance okay now let's see
7:17
for this guy so for that guy we can do
7:19
something like this okay like St do St
7:23
do what so it's going to be something
7:25
like this okay do
7:28
write opening close Okay since it's open
7:31
and close let me copy all this thing
7:34
just come here and Bo okay what let's
7:37
say Okay
7:39
notifications let's see
7:43
notifications are enable Okay are en
7:49
notifications are enable
7:51
dot okay and let me close this now let
7:56
me remove this guys and let's say
7:58
something like this
8:01
if
8:02
no not if notify okay
8:08
else what's going to say it's going to
8:10
say notifications on okay
8:13
notifications else
8:16
notification
8:18
are disable are disable Okay save now
8:23
let's go there and check what we got if
8:25
I come here if I refresh this boom
8:28
notification are disabl okay if I enable
8:31
this notifications are enabled I can
8:33
remove boom so this is how you can use a
8:35
sidebar so sidebar is very useful for
8:38
configurations okay so even these days
8:41
for those who are working a lot with uh
8:44
creating AI agents okay they are using a
8:47
lot streamly so that they
8:49
can create some AI agents okay since
8:52
streamly is very used it's very easy to
8:56
create uh interface okay so stream lad
9:01
right now is a very good option for that
9:03
for creating AI
9:05
agents okay now good apart of sidebar we
9:09
can also work with container okay so a
9:12
container is like is kind of any
9:14
invisible okay grouping elements that
9:16
helps to exract your contents in a
9:19
logical way okay so it is very useful
9:21
for organizing different section of our
9:24
page okay so in order to use a container
9:27
and in stream L we can do something like
9:29
this I'm just going to come here okay
9:32
I'm going to come here and uh to use the
9:36
container we can do something like this
9:38
okay let me say
9:39
with okay with what SD do
9:44
container this way okay container open
9:47
and close dot boom here inside we start
9:50
writing our container okay we can SD dot
9:53
sub subheader
9:56
subheader open close let's say something
9:59
okay user
10:03
profile user profile okay save now if I
10:06
come
10:07
here if I refresh this as you can see
10:11
user profile okay now if I go back okay
10:15
H inside again and I can say for I can
10:19
create a column inside of a container
10:21
which is a very good thing for if I say
10:23
call okay call what call
10:25
comma and uh call to
10:29
okay this will be the call one for colon
10:32
one and this will be for colon two so it
10:35
can be
10:36
equal St do columns okay do columns open
10:41
and close so here I'm going to say how
10:44
many columns I need to write so I'm
10:46
going to give give two since I gave it
10:48
two variables okay so this will be the
10:50
first column this is the second column
10:51
so now in order to use this column I can
10:54
say something like this okay with call
10:57
one do Hing side okay oh oh I put wrong
11:01
thing okay dot now whatever I will write
11:04
here is going to show inside of the
11:05
column one we can say STD
11:09
dot textor
11:12
input input input we can open and here
11:16
we can say for example okay uh first
11:19
name
11:21
first first name save okay uh blah blah
11:27
okay save if I come me if I refresh this
11:31
guy Bo as you can see use okay first
11:34
name as you can see it's it just occupy
11:36
only this area Okay this area is kind of
11:38
empty now I can come here I can do the
11:41
same no just let me copy this since is
11:43
almost like the same thing and paste it
11:46
I can say with call I'm going to change
11:48
call to save what I can say St do input
11:52
I can say for example last name okay
11:55
last oh why I deleted last name we can
12:00
say last name save if I come here if I
12:04
refresh boom as you can see first name
12:07
last name so this is how container is
12:09
very useful okay it help you to organize
12:12
your app okay in a very good way uh now
12:16
if we see this in app uh
12:20
mobile okay as you can see it will show
12:23
this way okay now I can open my
12:25
container it's going to show this my
12:26
side by is going to show this and this
12:28
is my container stuffs okay this user
12:30
profile blah blah and so on so apart of
12:33
that we can also add something like this
12:36
okay for example SD do text uncore area
12:43
open and close what we going to say
12:45
let's say Okay b
12:48
b
12:51
comma and uh let's say something okay
12:55
tell us about tell us about you tell us
13:00
about you okay about you no about
13:03
yourself yourself your something is
13:06
missing your tell us about
13:09
yourself tell us about yourself okay
13:12
save and if I come here if I refresh
13:15
this guy as you can see I have here okay
13:18
B tell us about yourself now this one
13:20
since is not inside of any column that's
13:22
why it took the full space okay this bio
13:26
here okay so now I can just come here
13:29
and start telling about myself okay blah
13:32
blah blah blah blah blah so this is very
13:34
useful also so this is how you can
13:37
create a container inside of uh stream
13:39
lead application okay so apart of that
13:41
also you can organize like multiple
13:44
section using container in your app okay
13:47
so for that you can do something like
13:48
this okay so I'm just going to copy this
13:50
guy and come here boom I will paste okay
13:53
so and after this okay I'm going to keep
13:57
this sub header okay and uh let me just
14:02
remove this guy and you come here this
14:05
input you can say like this okay for
14:08
example instead of
14:10
this right I can say for example let's
14:13
say something like this okay
14:15
right s do WR write what explore
14:18
training topics and insight okay
14:23
explore
14:24
explore
14:26
training topics
14:29
and
14:31
insides okay then after this I can just
14:34
create one kind of botom okay s do
14:39
BM BM open and close what I can I do I
14:43
can say
14:44
read read more okay perfect safe and
14:49
here also I can do kind of almost same
14:52
thing
14:54
okay a key uh here okay I'm going to use
14:58
remove this this username let's say Okay
15:02
picture
15:03
pictured articles okay for if it's for
15:07
if it's a block this okay fix fix
15:10
articles let me copy this guy and come
15:13
here boom paste
15:16
so I don't need this one okay I don't
15:20
need this one you blah blah
15:23
bye-bye but I need this test area come
15:27
on move this this okay this is the first
15:30
container this is the second container
15:32
come here
15:34
and boom let me paste here okay perfect
15:36
so now I can keep uh for example
15:39
subheader I can say for example user
15:42
feedback okay user feedback user
15:46
feedback so aart of user feedback we can
15:49
say a text
15:51
area who is going to go so let me remove
15:55
this guy
15:57
s bye-bye
16:00
okay and I need this
16:03
guy you come here you can stay here for
16:06
here I can say for example I can write
16:07
like a submit book let's say
16:10
submit save and here I can say something
16:14
like okay leave your
16:17
feedback uh let me write here
16:20
inside leave
16:22
your
16:24
feedback re leave your feedback save now
16:28
if I come here okay if I refresh this
16:32
boom as you can see okay feature act
16:35
article so article will be
16:37
here I if I click read Moree it will
16:41
lose some fingers then here can be for a
16:43
feedback okay use a feedback like leave
16:45
your feedback and just submit okay so
16:47
this is how you can use containers so
16:48
container as I said okay is very really
16:51
good to organize this stuff okay so by
16:53
using sideb bars and container okay
16:55
effectively you can create a very well
16:57
exract red and user friendly
17:00
applications okay in stream L and so you
17:03
can experiment experiment these tools
17:06
okay to improve organizing your app for
17:10
a better user uh experience okay so for
17:13
this video we are going to stay here so
17:16
thanks for watching please give a like
17:18
to this video And subscribe to the
17:21
channel and see you in the next video
17:23
bye-bye