Types
Sidebar
A sidebar
<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>
$('.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>
$('.ui.labeled.icon.sidebar')
.sidebar('toggle')
;
States
Sidebar
Visible
A sidebar can be visible on the page
Pusher
Dimmed
A pusher can be dimmed
Variations
Direction
A sidebar can appear on different sides of the page
Width
A sidebar can specify its width
Set-up
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.
<body>
<div class="ui sidebar">
...
</div>
<div class="pusher">
Your site's actual content
</div>
</body>
Using with Menu
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>
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.
<body>
<div class="ui sidebar">
...
</div>
<div class="ui top fixed menu">
...
</div>
<div class="pusher">
Your site's actual content
</div>
</body>
iOS Sidebars
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;
}
Behavior
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 |
Examples
Transitions
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 |
Direction
All Direction Animations
Vertical-Only Animations
Displaying Multiple
Multiple sidebars can be displayed at the same time only when using a supported animation like push or 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.
Application Content
// using context
$('.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')
;
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')
;
Starting Visible
A sidebar can start visible by adding the class name visible
Application Content
// showing multiple
$('.visible.example .ui.sidebar')
.sidebar({
context: '.visible.example .bottom.segment'
})
.sidebar('hide')
;
Sidebar
Behavior
| 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. |
Animation
| 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 |
Callbacks
| 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. |
Module
DOM Settings
| 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'
}
|
Debug
| 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'
}
|
|