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
ā”ļø 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
Sean here so today we're going to learn
0:03
about a very important topic in streaml
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 how we
0:16
can structure our app okay so in a in a
0:20
way 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
streamllet okay so a sidebar 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 Streamlit
0:48
we need to do something like this first
0:50
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 Streaml you just need to
0:58
call something like this let me call st
1:02
sidebar okay sidebar so this way we
1:07
create a 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:18
what I'm going to open so here I need to
1:19
give the title for my sidebar okay let
1:22
me see
1:23
appar sidebar
1:26
so you can give any title that you wish
1:28
okay so I just g I gave this name so
1:30
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
sidebar so in order to write anything
2:00
inside of sidebar you just need to
2:02
something like this st dot uh sidebar
2:06
always start with sidebar like this okay
2:09
dot write okay so you need to start with
2:11
sidebar so that you can understand I
2:13
need to write this inside of the sidebar
2:16
okay so when you write sidebar is like
2:18
it automatically activate the sidebar
2:20
then you in front you just add whatever
2:23
you wish okay let's say SD site bar
2:26
write what okay use the
2:31
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
thing here inside of my sidebar okay so
2:43
apart of this I can add alo some
2:45
elements inside of my sidebars elements
2:47
such as Okay let me show you i can add
2:49
elements such as uh I'm going to create
2:51
a variable called username okay
2:54
username so this us the name will be
2:57
equal
2:58
st dot sidebar okay sidebar dot
3:04
text input test input open and close so
3:08
what I'm going to say so here inside you
3:11
you need to do something like this okay
3:12
let's give an
3:14
enter your enter your name dot okay then
3:20
after getting the name let's create some
3:22
select bottle so let's say options
3:27
option so this option can be for them
3:30
stide bar sidebar dot select bot okay
3:36
select box select box select box so this
3:40
select box uh we can give options for
3:43
like choose a c category let's say
3:45
something something like this okay
3:47
choose a category choose a category and
3:52
uh let's give dot here okay let's give
3:56
the list of 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
4:11
okay 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 also notify okay so this
4:24
notify can be something like styide bar
4:27
sidebar dot dot what
4:31
uh checkbox let's use a checkbox shake
4:36
checkbox open and close what we can say
4:40
and we can say for example
4:43
enable
4:45
enable
4:47
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
example here to enter the name and we
5:03
can choose a category okay inside of the
5:06
things and we can enable notification
5:08
Okay so in order for us to get those
5:10
informations okay we can do something
5:12
like this boom i can come here for uh
5:15
let's say that display the selected
5:18
options okay let's say ST dot
5:22
header let's open and close and let's
5:24
say something like this okay let's use F
5:27
string and we can say for example
5:29
welcome welcome comma welcome who h
5:33
let's use the username okay the guy that
5:36
we are going to get from here let's
5:38
welcome username okay perfect welcome
5:42
username and we can write also some
5:45
condition if let's say if
5:48
username okay else okay it will come
5:53
username okay if there is a username
5:56
else we can Say
5:58
what h 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 come out
6:08
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 example if I enter here my
6:20
name if I click anywhere boom welcome
6:23
okay so if there is no username boom you
6:25
just say welcome user something like
6:28
this okay it's very cool so this is how
6:31
you can work with side bars and to give
6:33
you more options but now let's get
6:35
something like this st dot
6:37
write what we going to write let's say
6:40
let's use f string as always and let's
6:43
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
is only
6:56
singular now let's check what we got if
6:59
I came here if
7:00
Refresh welcome user okay now let's say
7:05
as always if I choose here health boom
7:08
welcome you selected health okay if I
7:11
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 dot st
7:24
do what so it's going to be something
7:25
like this okay
7:28
it's open and close okay since it's open
7:32
and close let me copy all this thing
7:34
just come here and boom okay what let's
7:37
say okay
7:39
notifications let's say
7:44
notifications are enabled okay are
7:48
enabled notifications are enabled
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
notifi not if notify okay
8:07
else what's going to say it's going to
8:10
say notifications only okay
8:13
notifications else
8:16
notification
8:18
are disabled are disabled okay safe now
8:23
let's go there and check what We got if
8:26
I come here if I refresh this boom
8:29
notification are disabled okay if I
8:30
enable this notifications are enabled i
8:33
can remove boom so this is how you can
8:35
use a sidebar so sidebar is very useful
8:37
for configurations okay so even these
8:41
days for those who are working a lot
8:43
with uh creating AI agents okay they are
8:46
using a lot streamly so that they
8:49
can create some AI agents okay since
8:52
stream is very use is very easy to
8:57
create interface okay so streamly right
9:01
now is a very good option for that for
9:04
creating AI
9:05
agents okay now good uh apart of sidebar
9:09
we can also work with container okay so
9:12
a container is like it's kind of any
9:14
invisible okay grouping elements that
9:16
helps to structure contents in a logical
9:19
way okay so it is very useful for
9:21
organizing different section of our page
9:24
okay so in order to use a container in
9:27
in streaml we can do something like this
9:30
h I'm just going to come here okay i'm
9:33
going to come here and uh to use a
9:36
container we can do something like this
9:38
okay let me say with okay with what st
9:42
dot
9:44
container this way okay container open
9:47
and close dot boom here inside we starts
9:50
writing our container okay we can st do
9:54
sub header sub header open and close
9:58
let's say something like this 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:16
here inside again and I can say for I
10:19
can create a column inside of a
10:20
container which is a very good thing for
10:22
them if I say call okay call what call
10:25
comma and uh call two okay then this
10:30
will be the call one for column one and
10:33
this will be for column two so it can be
10:35
equal uh st dot columns okay dot columns
10:41
open and close so here I'm going to say
10:44
how 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 dot here inside okay oh I put the
11:01
wrong thing okay dot now whatever I will
11:03
write here is going to show inside of
11:05
the column one because we can say st
11:09
dot text
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:28
save if I come here if I refresh this
11:31
guy boom As you can see user 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 also no just let me copy this is
11:43
almost like kind of the same thing and
11:45
paste here I can say with call I'm going
11:48
to change call to save what I can say
11:52
input I can say for example last name
11:54
okay last oh why I deleted name we can
11:59
say
12:01
last name save if I come here if I
12:05
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 then I can open my
12:25
container it's going to show this my
12:26
sidebar 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 uh
12:36
this okay for example SD dot
12:41
textore area open and close what we
12:45
going to say let's say okay
12:51
bo and uh let's say something else okay
12:55
tell us about tell us about you tell us
13:00
about you okay about you know about
13:03
yourself your 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 it okay
13:18
po tell us about yourself now this one
13:20
since this is not inside of any column
13:22
that's why it took the full space okay
13:25
this bio here okay so now I can just
13:29
come here and start telling about myself
13:31
okay blah blah blah blah blah blah so
13:34
this is very useful also so this is how
13:36
you can create the container inside of
13:39
uh streaml application okay so apart of
13:41
that 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:07
example um instead of this uh right I
14:12
can say for let's say something like
14:13
this okay
14:15
write st write what explore trending
14:19
topics and insight okay
14:23
explore
14:25
explore
14:26
trending
14:28
topics and
14:31
insight okay then after this I can just
14:34
create one kind of bum okay
14:38
sd
14:40
oh open and close what I can I do i can
14:44
read read more okay perfect save and
14:49
here also I can do kind of almost same
14:52
thing okay
14:54
um a key uh here okay i'm going to use
14:58
remove this username let's say Okay
15:02
feed
15:03
fixed articles okay for example if it's
15:06
for if it's a blog this okay
15:09
fix articles let me copy this guy and
15:13
come here boom paste
15:16
so I don't need this one okay i don't
15:21
need this one you blah blah
15:23
bye-bye but I need this test area come
15:27
on remove 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:37
so now I can keep uh for example sub
15:39
header i can say for example user
15:41
feedback okay user feedback user
15:46
feedback so apart of user feedback we
15:49
can insert a text area
15:52
who's going to go so let me remove this
15:55
guy
15:57
st
15:59
bye-bye okay and I need this
16:03
guy you come here you can stay here for
16:05
example here I can say for example I can
16:07
write like a submit okay let's say
16:10
submit save and here I can say something
16:14
like okay leave your
16:16
feedback uh let me write here
16:20
inside leave
16:23
your
16:24
feedback re leave your feedback safe now
16:28
if I come here okay if I refresh this
16:32
boom as you can see okay feature actual
16:35
article so article will be
16:37
here i can if I click read more it will
16:41
do something here and here can be for
16:43
feedback okay user feedback like leave
16:45
your feedback and the submit okay so
16:47
this is how you can use container so
16:48
container as I said okay is very really
16:51
good to organize this stuff okay so by
16:54
using sidebars and container okay
16:55
effectively you can create a very well
16:58
extract thread and user friendly
17:00
applications okay in streamllet and uh
17:03
so you can experiment experiment these
17:05
tools okay to improve organizing your
17:09
app for a better user experience okay so
17:13
for this video we are going to stay here
17:16
so thanks for watching please Give a
17:18
like this video and subscribe to the
17:21
channel and see you on the next video
#Flash-Based Entertainment
#Mobile & Wireless
#Mobile Apps & Add-Ons
#Online Goodies
#Skins, Themes & Wallpapers
#Social Network Apps & Add-Ons