Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
A sidebar is a great way to hide additional content from the user unless required. Semantic UI provides us with a styled sidebar. Before jumping into the sidebar variations, let’s have a look at various sidebar variation classes.
Semantic UI Sidebar variation classes:
- Direction: Semantic UI allows us to decide the direction of the sidebar. The sidebar can be positioned either on the top, bottom, left, or right.
- Width: Semantic UI allows us to change the width of the sidebar. The sidebar can be very thin, thin, wide, normal, or very wide.
Syntax:
<div class="ui direction-variation-class width-variation-class sidebar"> ... </div>
Example: In the below example, we have created various sidebars with different directions.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI Sidebar Variations</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui left sidebar inverted vertical menu" >
< a class = "item" >Web Development</ a >
< a class = "item" >Machine Learning</ a >
< a class = "item" >Data Science</ a >
< a class = "item" >Blockchain</ a >
</ div >
< div class = "ui right sidebar inverted vertical menu" >
< a class = "item" >Web Development</ a >
< a class = "item" >Machine Learning</ a >
< a class = "item" >Data Science</ a >
< a class = "item" >Blockchain</ a >
</ div >
< div class = "ui top sidebar inverted horizontal menu" >
< a class = "item" >Web Development</ a >
< a class = "item" >Machine Learning</ a >
< a class = "item" >Data Science</ a >
< a class = "item" >Blockchain</ a >
</ div >
< div class = "ui bottom sidebar inverted horizontal menu" >
< a class = "item" >Web Development</ a >
< a class = "item" >Machine Learning</ a >
< a class = "item" >Data Science</ a >
< a class = "item" >Blockchain</ a >
</ div >
< div class = "ui dimmed pusher container" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Sidebar Variations</ h4 >
< hr >
< br />
< button class = "ui button" onclick = "toggleLeft()" >
Toggle Left Sidebar
</ button >
< button class = "ui button" onclick = "toggleRight()" >
Toggle Right Sidebar
</ button >
< button class = "ui button" onclick = "toggleTop()" >
Toggle Top Sidebar
</ button >
< button class = "ui button" onclick = "toggleBottom()" >
Toggle Bottom Sidebar
</ button >
< button class = "ui button" onclick = "toggleAll()" >
Toggle All
</ button >
</ div >
< script >
const toggleLeft =
() => $('.ui.left.sidebar').sidebar('setting',
'transition', 'overlay').sidebar('toggle');
const toggleRight =
() => $('.ui.right.sidebar').sidebar('setting',
'transition', 'overlay').sidebar('toggle');
const toggleTop =
() => $('.ui.top.sidebar').sidebar('setting',
'transition', 'overlay').sidebar('toggle');
const toggleBottom =
() => $('.ui.bottom.sidebar').sidebar('setting',
'transition', 'overlay').sidebar('toggle');
const toggleAll = () => {
$('.ui.left.sidebar').sidebar('setting',
'transition', 'overlay').sidebar('toggle');
$('.ui.right.sidebar').sidebar('setting',
'transition', 'overlay').sidebar('toggle');
$('.ui.top.sidebar').sidebar('setting',
'transition', 'overlay').sidebar('toggle');
$('.ui.bottom.sidebar').sidebar('setting',
'transition', 'overlay').sidebar('toggle');
}
</ script >
</ body >
</ html >
|
Output:
Example 2: In the below example, we have created sidebars of various widths.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI Sidebar Variations</ title >
< link href =
rel = "stylesheet" />
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui left thin sidebar inverted vertical menu t" >
< a class = "item" >Web Development</ a >
< a class = "item" >Machine Learning</ a >
< a class = "item" >Data Science</ a >
< a class = "item" >Blockchain</ a >
</ div >
< div class="ui left very thin sidebar
inverted vertical menu vt">
< a class = "item" >Web Development</ a >
< a class = "item" >Machine Learning</ a >
< a class = "item" >Data Science</ a >
< a class = "item" >Blockchain</ a >
</ div >
< div class="ui left wide sidebar inverted
vertical menu w">
< a class = "item" >Web Development</ a >
< a class = "item" >Machine Learning</ a >
< a class = "item" >Data Science</ a >
< a class = "item" >Blockchain</ a >
</ div >
< div class="ui left very wide sidebar
inverted vertical menu vw">
< a class = "item" >Web Development</ a >
< a class = "item" >Machine Learning</ a >
< a class = "item" >Data Science</ a >
< a class = "item" >Blockchain</ a >
</ div >
< div class = "ui dimmed pusher container" >
< h2 class = "ui green header" >GeeksforGeeks</ h2 >
< h4 >Semantic UI Sidebar Variations</ h4 >
< hr >
< br />
< button class = "ui button" onclick = "toggleLeft()" >
Toggle Thin Sidebar
</ button >
< button class = "ui button" onclick = "toggleRight()" >
Toggle Very Thin Sidebar
</ button >
< button class = "ui button" onclick = "toggleTop()" >
Toggle Wide Sidebar
</ button >
< button class = "ui button" onclick = "toggleBottom()" >
Toggle Very Wide Sidebar
</ button >
</ div >
< script >
const toggleLeft =
() => $('.ui.t.sidebar').sidebar('setting',
'transition', 'overlay').sidebar('toggle');
const toggleRight =
() => $('.ui.vt.sidebar').sidebar('setting',
'transition', 'overlay').sidebar('toggle');
const toggleTop =
() => $('.ui.w.sidebar').sidebar('setting',
'transition', 'overlay').sidebar('toggle');
const toggleBottom =
() => $('.ui.vw.sidebar').sidebar('setting',
'transition', 'overlay').sidebar('toggle');
</ script >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/modules/sidebar.html