Sidebar

A sidebar can appear on any side of content

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

Left

Top

Right

Bottom

A sidebar can be formatted to include additional styling for display

<div class="ui styled sidebar">...</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Show

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

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

Very Thin

Thin

Wide

Very Wide

A sidebar can appear floating above content

<div class="ui floating sidebar">...</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Show

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

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.

HTML

<div class="ui sidebar">
  Any content in the world
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Javascript

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

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.

Example HTMLHTML

<div class="ui red vertical demo sidebar menu">
  <a class="item">
    <i class="home icon"></i>
    Home
  </a>
  <a class="active item">
    <i class="heart icon"></i>
    Current Section
  </a>
  <a class="item">
    <i class="facebook icon"></i>
    Like us on Facebook
  </a>
  <div class="item">
    <b>More</b>
    <div class="menu">
      <a class="item">About</a>
      <a class="item">Contact Us</a>
    </div>
  </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Run Code

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

All the following behaviors can be called using the syntax:

$('.your.element')
  .sidebar('behavior name', argumentOne, argumentTwo)
;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Run Code

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

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

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

Trigger Sidebar

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

Run Code

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

Open Sidebar

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

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

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
errors	error : { method : 'The method you called is not defined .', notFound : 'There were no elements that matched the specified selector' } XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

You Might Like

Contact Us

Share

You Might Like

Contact Us

Types

Direction

Variations

Styled

Size

Floating

Initializing

Usage

Showing a sidebar

Behavior

Overlay

Triggering show/hide with other content

Triggering custom action with other content

Sidebar Settings
Form settings modify the sidebar behavior

Callbacks

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

Debug Settings
Debug settings controls debug output to the console

Sidebar

You Might Like

Contact Us

Share

You Might Like

Contact Us

Types

Direction

Variations

Styled

Size

Floating

Initializing

Usage

Showing a sidebar

Behavior

Overlay

Triggering show/hide with other content

Triggering custom action with other content

Sidebar Settings Form settings modify the sidebar behavior

Callbacks

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

Debug Settings Debug settings controls debug output to the console

Sidebar Settings
Form settings modify the sidebar behavior

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

Debug Settings
Debug settings controls debug output to the console