Sidebar

Download

A sidebar

Although sidebars can be used with any content, in most cases, sidebars are used with inverted vertical menu. Please see the usage tab for more details.

<body>
  <div class="ui sidebar inverted vertical menu">
    <a class="item">
      1
    </a>
    <a class="item">
      2
    </a>
    <a class="item">
      3
    </a>
  </div>
  <div class="pusher">
    <!-- Site content !-->
  </div>
</body>

Run Code

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

<div class="ui left demo vertical inverted sidebar labeled icon menu">
  <a class="item">
    <i class="home icon"></i>
    Home
  </a>
  <a class="item">
    <i class="block layout icon"></i>
    Topics
  </a>
  <a class="item">
    <i class="smile icon"></i>
    Friends
  </a>
</div>

Run Code

$('.ui.labeled.icon.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.

<div class="ui visible sidebar"></div>

Pusher

A pusher can be dimmed

<div class="dimmed pusher"></div>

A sidebar can appear on different sides of the page

<div class="ui top sidebar"></div>
<div class="ui right sidebar"></div>
<div class="ui bottom sidebar"></div>
<div class="ui left sidebar"></div>

A sidebar can specify its width

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

<div class="ui thin sidebar"></div>
<div class="ui very thin sidebar"></div>
<div class="ui sidebar"></div>
<div class="ui wide sidebar"></div>
<div class="ui very wide sidebar"></div>

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.

<body>
  <div class="ui sidebar">
    ...
  </div>
  <div class="pusher">
    Your site's actual content
  </div>
</body>

Sidebars can be any content, however the most common type of content to display off-canvas is a menu. To understand the required structure for a menu, please refer to the menu documentation.

<body>
  <div class="ui left vertical menu sidebar">
    <a class="item">
      Item 1
    </a>
    <a class="item">
      Item 2
    </a>
    <a class="item">
      Item 3
    </a>
  </div>
  <div class="pusher">
    <!-- Site content !-->
  </div>
</body>

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.

<body>
  <div class="ui sidebar">
    ...
  </div>
  <div class="ui top fixed menu">
    ...
  </div>
  <div class="pusher">
    Your site's actual content
  </div>
</body>

Sidebars use a special fix for iOS that are added using userAgent detection.

This should have no meaningful affect on your code, but will prevent the canvas from incorrectly autoresizing when a sidebar opens.

html.ios {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
html.ios,
html.ios body {
  height: initial !important;
}

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

Not all sidebar transitions are available for every sidebar direction, or when multiple sidebars are visible at a time.

	Multiple Visible	Supports Vertical Sidebars	Supports Horizontal Sidebars
Overlay
Push
Scale Down
Uncover
Slide Along
Slide Out

Dim Page

Left

Right

Top

Bottom

Overlay

Push

Scale Down

Uncover

Slide Along

Slide Out

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.

Run Code

// showing multiple
$('.demo.sidebar')
  .sidebar('setting', 'transition', 'overlay')
  .sidebar('toggle')
;

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

// using context
$('.context.example .ui.sidebar')
  .sidebar({
    context: $('.context.example .bottom.segment')
  })
  .sidebar('attach events', '.context.example .menu .item')
;

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

Run Code

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

Trigger Sidebar

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

Run Code

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

Open Sidebar

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.

Run Code

// 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 transition to use when animating sidebar. Defaults to 'auto' which selects transition from `defaultTransition` based on direction.
mobileTransition	auto	Named transition to use when animating when detecting mobile device. Defaults to 'auto' which selects transition from `defaultTransition` based on direction.
defaultTransition	`{ 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	false	Whether Javascript animations should be used. Defaults to `false`. Setting to `auto` will use legacy animations only for 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.

Setting	Default
namespace	sidebar
className	`className : { active : 'active', animating : 'animating', dimmed : 'dimmed', ios : 'ios', pushable : 'pushable', pushed : 'pushed', right : 'right', top : 'top', left : 'left', bottom : 'bottom', visible : 'visible' }`
regExp	`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	`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
silent	False	Silences all console output including error messages, regardless of other debug settings.
debug	False	Provides standard debug output to console
performance	True	Provides standard debug output to console
verbose	True	Provides ancillary debug output to console
errors	`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' }`

Help Translate Submit an Issue Join our Chat CLA

GitHub Repo User Forums 1.x Docs 0.x Docs

Support for the continued development of Semantic UI comes directly from the community.

Free & Open Source (MIT)

New Content Awaits

UI Framework

Standalone

Package Managers

Package Managers

Types

Sidebar

States

Sidebar

Visible

Pusher

Dimmed

Variations

Direction

Width

Set-up

Page Structure

Using with Menu

Using Fixed Content

iOS Sidebars

Behavior

Examples

Transitions

Direction

All Direction Animations

Vertical-Only Animations

Displaying Multiple

Using a custom context

Application Content

Triggering show/hide with other content

Triggering custom behavior with other content

Starting Visible

Application Content

Sidebar

Behavior

Animation

Callbacks

Module

DOM Settings

Debug

Community

Network

Help Preserve This Project

Dimmer Message Dimmer sub-header

Dimmer Message
Dimmer sub-header