Ribbon menu
A ribbon is a command bar that organizes a program's features into a series of tabs.
About
In computer interface design, a ribbon is a graphical control element in the form of a set of toolbars placed on several tabs. The typical structure of a ribbon includes large, tabbed toolbars, filled with graphical buttons and other graphical control elements, grouped by functionality. Such ribbons use tabs to expose different sets of controls, eliminating the need for numerous parallel toolbars. Contextual tabs are tabs that appear only when the user needs them.
Ribbon menu structure
The Ribbon menu consists two main parts: tabs and tab content. The ribbon menu must contains role ribbonmenu.
Tabs is a list with class .tabs-holder and content holder - container with class .content-holder.
<nav data-role="ribbonmenu">
<ul class="tabs-holder">
...
</ul>
<div class="content-holder">
...
</div>
</nav>
Tabs
To create tabs you must use list with class .tabs-holder. Each item in tabs must be defined as li > a.
Item can has special state static. To create static item, add class .static to <li>.
In ribbon menu, static tabs have self-behavior. For disabling tab you mus use class .disabled.
<nav data-role="ribbonmenu">
<ul class="tabs-holder">
<li class="static"><a href="#">Static</a></li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
<li><a href="#">Three</a></li>
</ul>
</nav>
Each tab can be linked to content section. To link use attribute href for anchor. Value for this attribute must be valid element id.
Content
Content for tabs must be stored in containers with class .section. All section put into container with class .content-holder.
Each section must have attribute id with unique value. This value will be used to link from the tab to content.
<nav data-role="ribbonmenu">
<ul class="tabs-holder">
<li class="static"><a href="#">Static</a></li>
<li><a href="#section-one">One</a></li>
<li><a href="#section-two">Two</a></li>
<li><a href="#section-three">Three</a></li>
</ul>
<div class="content-holder">
<div class="section" id="section-one">
<p class="p-4">Section one</p>
</div>
<div class="section" id="section-two">
<p class="p-4">Section two</p>
</div>
<div class="section" id="section-three">
<p class="p-4">Section three</p>
</div>
</div>
</nav>
Section
Tabs content stored in a section. Section is a container with class .section.
Each section can contains elements, groups of the elements and group title.
<nav data-role="ribbonmenu">
<ul class="tabs-holder">
<li><a href="#section-1-1">Main</a></li>
</ul>
<div class="content-holder">
<div class="section" id="section-1-1">
<div class="group">
<button class="ribbon-button">
<span class="icon">
<img src="images/share.svg">
</span>
<span class="caption">Share</span>
</button>
<span class="title">Group title</span>
</div>
<div class="group">
<button class="ribbon-button">
<span class="icon">
<img src="images/share.svg">
</span>
<span class="caption">Share</span>
</button>
<span class="title">Group title</span>
</div>
</div>
</div>
</nav>
Ribbon elements
Metro UI contains the number of special ribbon elements:
button,
tool button,
icon button,
split button,
buttons group and
dropdown.
Button
To create ribbon button add class .ribbon-button to <button> element and then add icon and caption.
<button class="ribbon-button">
<span class="icon">
<img src="images/share.svg">
</span>
<span class="caption">Share</span>
</button>
Icon button
To create ribbon icon button add class .ribbon-icon-button to <button> element and then add icon and caption.
<button class="ribbon-icon-button">
<span class="icon">
<img src="images/share.svg">
</span>
<span class="caption">Share</span>
</button>
Tool button
To create ribbon tool button add class .ribbon-tool-button to <button> element and then add icon.
<button class="ribbon-tool-button">
<span class="icon">
<img src="images/share.svg">
</span>
</button>
Split button
To create ribbon split button add class .ribbon-split-button to <div> element and then add button, split and dropdown.
<div class="ribbon-split-button">
<button class="ribbon-main">
<span class="icon">
<span class="mif-cogs"></span>
</span>
</button>
<span class="ribbon-split dropdown-toggle">Options</span>
<ul class="ribbon-dropdown" data-role="dropdown" data-duration="100">
<li class="checked"><a href="#">Modification</a></li>
<li class="checked"><a href="#">Type</a></li>
<li class="checked"><a href="#">Size</a></li>
<li><a href="#">Creating</a></li>
<li><a href="#">Authors</a></li>
<li class="checked-one"><a href="#">Tags</a></li>
<li><a href="#">Names</a></li>
<li class="divider"></li>
<li><a href="#">Columns...</a></li>
</ul>
</div>
Buttons group
You can create button group where one button has active state at one time.
Active button has class .active.
For this there are two ways:
- Use role
data-role="button-group"for buttons container - Use predefined class
.ribbon-toggle-group
<nav data-role="ribbonmenu">
<ul class="tabs-holder">
<li><a href="#section-group">Group</a></li>
</ul>
<div class="content-holder">
<div class="section" id="section-group">
<div class="group">
<div data-role="button-group" data-cls-active="active">
<button class="ribbon-button">
<span class="icon">
<span class="mif-vertical-align-top"></span>
</span>
<span class="caption">Top</span>
</button>
<button class="ribbon-button">
<span class="icon">
<span class="mif-vertical-align-center"></span>
</span>
<span class="caption">Center</span>
</button>
<button class="ribbon-button">
<span class="icon">
<span class="mif-vertical-align-bottom"></span>
</span>
<span class="caption">Bottom</span>
</button>
</div>
<span class="title">Role group</span>
</div>
<div class="group">
<div class="ribbon-toggle-group">
<button class="ribbon-icon-button">
<span class="icon">
<span class="mif-list"></span>
</span>
<span class="caption">List</span>
</button>
<button class="ribbon-icon-button">
<span class="icon">
<span class="mif-apps"></span>
</span>
<span class="caption">Content</span>
</button>
<button class="ribbon-icon-button">
<span class="icon">
<span class="mif-table"></span>
</span>
<span class="caption">Icons</span>
</button>
<button class="ribbon-icon-button">
<span class="icon">
<span class="mif-image"></span>
</span>
<span class="caption">Small icons</span>
</button>
<button class="ribbon-icon-button">
<span class="icon">
<span class="mif-images"></span>
</span>
<span class="caption">Large icons</span>
</button>
<button class="ribbon-icon-button">
<span class="icon">
<span class="mif-windows"></span>
</span>
<span class="caption">Tiles</span>
</button>
</div>
<span class="title">Group class</span>
</div>
</div>
</div>
</nav>
Dropdown menu
Ribbon menu contains self designed dropdown menu. To create ribbon dropdown menu you must add class ribbon-dropdown to list.
Each item can has three sates: simple, checked and checked-one.
<ul class="ribbon-dropdown">
<li class="checked"><a href="#">Modification</a></li>
<li class="checked"><a href="#">Type</a></li>
<li class="checked"><a href="#">Size</a></li>
<li><a href="#">Creating</a></li>
<li><a href="#">Authors</a></li>
<li class="checked-one"><a href="#">Tags</a></li>
<li><a href="#">Names</a></li>
<li class="divider"></li>
<li><a href="#">Columns...</a></li>
</ul>
You can use ribbon dropdown menu to create button with dropped down. To create it you must use next html structure:
<div>
<button class="ribbon-[button|icon-button|tool-button] dropdown-toggle">
...
</button>
<ul class="ribbon-dropdown" data-role="dropdown">
<li><a href="...">...</a></li>
...
<li><a href="...">...</a></li>
</ul>
</div>
<div>
<button class="ribbon-tool-button dropdown-toggle">
<span class="icon">
<span class="mif-file-zip fg-cyan"></span>
</span>
</button>
<ul class="ribbon-dropdown" data-role="dropdown" data-duration="100">
<li class="checked"><a href="#">Modification</a></li>
<li class="checked"><a href="#">Type</a></li>
<li class="checked"><a href="#">Size</a></li>
<li><a href="#">Creating</a></li>
<li><a href="#">Authors</a></li>
<li class="checked-one"><a href="#">Tags</a></li>
<li><a href="#">Names</a></li>
<li class="divider"></li>
<li><a href="#">Columns...</a></li>
</ul>
</div>
Others...
You can put any others elements to ribbon menu. See first example, input and button tabs.
Events
When ribbon menu works, it generate any events. You can create callback to events to interact with it.
| Event | Data-* | Desc |
|---|---|---|
onStatic(tab, el) |
data-on-static |
The event occurs when the user clicks on the static tab |
onBeforeTab(tab, el) |
data-on-before-tab |
The event occurs before tab change. If this function return false, tab not activated |
onTab(tab, el) |
data-on-tab |
The event occurs after tab changed. |
onRibbonMenuCreate(el) |
data-on-ribbon-menu-create |
The event occurs after menu created. |
<nav data-role="ribbonmenu"
data-on-tab="console.log(arguments)">
...
</nav>