A sidebar is a menu hidden beside page content

Learn about Modules



A sidebar can appear on any side of content




A sidebar can be formatted to include additional styling for display



A sidebar can vary in width and height to allow more content

Very Thin
Very Wide


A sidebar can appear floating above content



Any content can be used as a sidebar by adding the class ui sidebar and initializing the menu in javascript.

Fixed Position

Fixed position content may have issues changing it's position when a sidebar appears. There are two solutions

  • Specify your fixed content without using the css left or top properties.
  • Apply styles on the fixed element to adjust its position when the sidebar appears. You can do this by descending from the body tag which receives the class (direction) pushed when the view is moved.
$('.ui.sidebar') .sidebar() ;


Showing a sidebar

A sidebar can be shown, hidden, or toggled. In the following examples sidebar is used in conjunction with ui menu to display a vertical menu as a sidebar.

$('.demo.sidebar') .sidebar('toggle') ;


All the following behaviors can be called using the syntax:

$('.your.element') .sidebar('behavior name', argumentOne, argumentTwo) ;
Behavior Description
attach events(selector, event) Attaches sidebar action to given selector. Default event if none specified is toggle
show Shows sidebar
hide Hides sidebar
toggle Toggles visibility of sidebar
is open Returns whether sidebar is open
is closed Returns whether sidebar is closed
push page Pushes page content to be visible alongside sidebar
get direction Returns direction of current sidebar
pull page Returns page content to original position
add body css Adds stylesheet to page head to trigger sidebar animations
remove body css Removes any inline stylesheets for sidebar animation
get transition event Returns vendor prefixed transition end event


A sidebar can overlay page content instead of pushing it to the side

$('.overlay.sidebar') .sidebar({ overlay: true }) .sidebar('toggle') ;

Triggering show/hide with other content

For convenience calling attach events will allow you to bind events. By default this will toggle the sidebar in and out of view on click

$('.demo.sidebar').first() .sidebar('attach events', '.toggle.button') ; $('.toggle.button') .removeClass('disabled') ;
Trigger Sidebar

Triggering custom action with other content

You can also however specify what action should occur when the element is clicked

$('.demo.sidebar').first() .sidebar('attach events', '.open.button', 'show') ; $('.open.button') .removeClass('disabled') ;
Open Sidebar

Sidebar Settings
Form settings modify the sidebar behavior

Setting Default Description
overlay false Whether sidebar should overlay page instead of pushing page to the side
exclusive true Whether multiple sidebars can be open at once
useCSS true Whether to use css animations or fallback javascript animations
duration 300 Duration of side bar transition animation


Callbacks specify a function to occur after a specific behavior.

Setting Context Description
onShow Sidebar Is called when a sidebar is shown.
onHide Sidebar Is called when a sidebar is hidden.
onChange Sidebar Is called after a sidebar changes visibility

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace sidebar Event namespace. Makes sure module teardown does not effect other events attached to an element.
className: { active : 'active', pushed : 'pushed', top : 'top', left : 'left', right : 'right', bottom : 'bottom' }
Class names used to attach style to state

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Sidebar Name used in debug logs
debug True Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
error : { method : 'The method you called is not defined.', notFound : 'There were no elements that matched the specified selector' }