A sidebar hides additional content beside a page.




A sidebar

Sidebars do not have any inherent formatting, and can be used to display any off-canvas content of your choosing. Sidebar have a loose coupling with ui menu which can provide additional structure for content.

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




A sidebar can be visible on the page

To have a sidebar appear on page load simply add the class visible to the sidebar.



A pusher can be dimmed



A sidebar can use different transitions to display itself

Browsers that do not support translate3D, like IE < 10 will automatically fall back to javascript transitions, you can also force this behavior using useLegacy: true.

Multiple Visible Supports Horizontal Sidebars Supports Vertical Sidebars
Scale Down
Slide Along
Slide Out
Scale Down
Horizontal Only Animations
Slide Along
Slide Out


A sidebar can appear on different sides of the page

Scale Down
Horizontal-Only Animation
Slide Along
Slide Out


A sidebar can specify its width

A sidebar will automatically adjust its animations to match any custom size specified in css


Page Structure

Using a sidebar requires a specific page structure. For optimal performance your page should be already set-up with this structure before initializing a sidebar.

Sidebar will automatically add the correct layout on first load if it is not set-up, however fixing your page's layout on load will reduce performance and is not recommended.
Your site's actual content

Using Fixed Content

Any fixed position content that should move with page content when your sidebar is visible, should receive the class name fixed and exist as a sibling element to your sidebar.

Fixed content that is not included adjacent to your pusher will lose its positioning when a sidebar is shown.
Your site's actual content

iOS Sidebars

Sidebars use a special fix for iOS

@media only screen and (max-width: @computerBreakpoint) { html.ios { overflow-x: hidden; -webkit-overflow-scrolling: touch; } }

Adding an overflow to html is necessary to make sure elements translated off-screen with 3d transformations do not cause iOS to trigger native canvas resizing.


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 visible Returns whether sidebar is visible
is hidden Returns whether sidebar is hidden
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


Displaying Multiple

Multiple sidebars can be displayed at the same time only when using a supported animation like push or overlay.

You may need to manually set the z-index on elements to ensure the intended sidebar element appears on top.
If you are triggering multiple sidebars at the same time, its recommended to set the transition to overlay.
// showing multiple $('.demo.sidebar') .sidebar('setting', 'transition', 'overlay') .sidebar('toggle') ;

Using a custom context

A sidebar can be initialized inside any element, not just a page's body.

A sidebar's context cannot have any padding. You can solve this by padding its inner content, or using an additional containing element
// showing multiple $('.context.example .ui.sidebar') .sidebar({ context: $('.context.example .bottom.segment') }) .sidebar('attach events', '.context.example .menu .item') ;

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

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

Triggering custom behavior with other content

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

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

Starting Visible

A sidebar can start visible by adding the class name visible

You must include the class pushable on a sidebars containing element for it to appear correctly before javascript initializes the element
Although sidebars support any size content, sidebars that are visible on load only support standard, predefined sizes like thin or wide. This makes sure content can be positioned correctly before javascript is available.
// showing multiple $('.visible.example .ui.sidebar') .sidebar({ context: '.visible.example .bottom.segment' }) .sidebar('hide') ;



Setting Default Description
context body Context which sidebar will appear inside
exclusive false Whether multiple sidebars can be open at once
closable true Whether sidebar can be closed by clicking on page
dimPage true Whether to dim page contents when sidebar is visible
scrollLock false Whether to lock page scroll when sidebar is visible
returnScroll false Whether to return to original scroll position when sidebar is hidden, automatically occurs with transition: scale
delaySetup false When sidebar is initialized without the proper html, using this option will defer creation of DOM to use requestAnimationFrame.


Setting Default Description
transition auto Named ui transitions to use when animating sidebar. Defaults to 'auto' which selects transition from defaultTransition based on direction.
mobileTransition auto Named ui transitions to use when animating when detecting mobile device. Defaults to 'auto' which selects transition from defaultTransition based on direction.
{ computer: { left : 'uncover', right : 'uncover', top : 'overlay', bottom : 'overlay' }, mobile: { left : 'uncover', right : 'uncover', top : 'overlay', bottom : 'overlay' } }
Default transitions for each direction and screen size, used with transition: auto
useLegacy auto Whether javascript animations should be used. Defaults to auto using for only browsers that do not support CSS transforms
duration 500 Duration of sidebar animation when using legacy javascript animation
easing easeInOutQuint Easing to use when using legacy javascript animation


Setting Context Description
onVisible Sidebar Is called when a sidebar begins animating in.
onShow Sidebar Is called when a sidebar has finished animating in.
onChange Sidebar Is called when a sidebar begins to hide or show
onHide Sidebar Is called before a sidebar begins to animate out.
onHidden Sidebar Is called after a sidebar has finished animating out.


DOM Settings

Setting Default
namespace sidebar
className : { active : 'active', animating : 'animating', dimmed : 'dimmed', ios : 'ios', pushable : 'pushable', pushed : 'pushed', right : 'right', top : 'top', left : 'left', bottom : 'bottom', visible : 'visible' }
regExp: { ios : /(iPad|iPhone|iPod)/g, mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g }
selector: { fixed : '.fixed', omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed', pusher : '.pusher', sidebar : '.ui.sidebar' }


Setting Default Description
name Sidebar Name used in debug logs
debug False 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.', pusher : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element', movedSidebar : 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag', overlay : 'The overlay setting is no longer supported, use animation: overlay', notFound : 'There were no elements that matched the specified selector' }

Dimmer Message
Dimmer sub-header