Semantic-UI Sidebar States
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 states, let’s have a look at various sidebar state classes.
Semantic UI Sidebar State:
- Visible: This is used to set the sidebar as visible on the initial screen load.
- Dimmed: This is used to dim the pusher container when the sidebar is toggled.
<div class="ui visible sidebar"> ... </div>
Example 1: In the below example, we have created a visible sidebar, which always appears when the screen loads.
Example 2: In the below example, we have created a dimmed pusher, where the pushed content is always dimmed when the sidebar is toggled.