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 labeled icon sidebar 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
The pusher is the element that will be pushed away by the sidebar and should contain your site content. See Page Structure
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>
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 |
| destroy | Destroys instance and removes all events |
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 |
| blurring | false | If dimmer should blur background |
| 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 |
Callbacks
| Setting | Context | Description |
|---|---|---|
| onVisible | Sidebar | Is called when a sidebar has finished animating in. |
| onShow | Sidebar | Is called when a sidebar begins animating in. Returning false from this callback will cancel the sidebar from showing. |
| onChange | Sidebar | Is called when a sidebar begins to hide or show |
| onHide | Sidebar | Is called before a sidebar begins to animate out. Returning false from this callback will cancel the sidebar from hiding. |
| 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',
pushable : 'pushable',
pushed : 'pushed',
right : 'right',
top : 'top',
left : 'left',
bottom : 'bottom',
visible : 'visible'
}
|
| regExp |
regExp: {
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 | false | 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'
}
|
|