Offcanvas
An Offcanvas is a sidebar component that can be
toggled from left, right, top or bottom of the screen. It contains a
different set of data and options on top of the main area, which are
subordinated to the content previously shown to the user (except for those
tailored for general navigation purposes) who can show or hide it on-demand.
Use Cases
- When, by user's request, another level of information is needed to be displayed (subordinated to the content on the main screen). This content can be a detailed block of information for an entry on the main area of the screen, a set of new options, a menu, a list of relevant links, a related table, etcetera.
- When a main navigation item (as the Header) requires more space or hierarchy levels to show a navigational menu.
- When a contextual form (as an Advanced Search Panel) requires more space, hierarchy levels, or supplementary information.
Offcanvas Title
Option 1
Child 1
Child 2
Child 3
Child 4
Option 3
Option 4
Option 5
Offcanvas right
Option 1
Child 1
Child 2
Child 3
Child 4
Option 3
Option 4
Option 5
Offcanvas Title
Offcanvas right
Offcanvas Left
Offcanvas right
HTML
Do's & Dont's
Side Column vs Off-Canvas
The difference between these two items, is related to their
behavior; just as the similarity is related to its layout.
A Side Column appears on screen together with the main content and other columns (if needed), while the Off-Canvas, shows and hides on demand, and it overlaps the content on the main screen.
In general terms, an Off-Canvas it the almost literal translation of the Side Column for restricted space scenarios or whenever the focus is needed on the contained interactions (similar to a Modal). However, this may vary depending on business needs.
A Side Column appears on screen together with the main content and other columns (if needed), while the Off-Canvas, shows and hides on demand, and it overlaps the content on the main screen.
In general terms, an Off-Canvas it the almost literal translation of the Side Column for restricted space scenarios or whenever the focus is needed on the contained interactions (similar to a Modal). However, this may vary depending on business needs.
Keep in mind the user needs
Similar to other components that overlap/focus a new level of
interactions (Modals or Wizards, for example), this one requires the
content to be carefully determined prior its implementation.
Be aware of the layout restrictions, the content nature, the interactions required, and most of all, the content shown on the main screen (where the user is coming from) as it will determine the level of relevance for this set of options.
Be aware of the layout restrictions, the content nature, the interactions required, and most of all, the content shown on the main screen (where the user is coming from) as it will determine the level of relevance for this set of options.
Never cover the full screen
On Desktop, under no circumstances should an Offcanvas occupy the
full width of the screen, making the the main content "disappears",
in the eyes of the user, since this defeats its purpose.
Remember that the main goal of the component is to provide a new level of content and interaction, without jumping to another screen and without confusing the user, as he must be aware at all times of the main screen from which he comes.
Remember that the main goal of the component is to provide a new level of content and interaction, without jumping to another screen and without confusing the user, as he must be aware at all times of the main screen from which he comes.
Alternative and Related components
