Commanding surface for panels, pages, and applications. Unlike the NavBar, this component should not navigate to other pages.
Provides a means of navigating to different areas within an application. On small screens, the navigation items are placed inside a hamburger menu.
State | Applied to | Result |
---|---|---|
.is-hidden |
.ms-CommandBarItem |
Hides a Command Bar item from view. |
.is-active |
.ms-CommandBarSearch |
Expands the search field for use. |
<head>
<link rel="stylesheet" href="fabric.min.css">
<link rel="stylesheet" href="fabric.components.min.css">
<script src="jquery-2.2.1.min.js"></script>
<script src="jquery.fabric.min.js"></script>
</head>
<div class="ms-CommandBar">
<div class="ms-CommandBarSearch">
<input class="ms-CommandBarSearch-input" type="text" placeholder="Search" tabindex="1"/>
<div class="ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper">
<i class="ms-Icon ms-Icon--search"></i>
</div>
<div class="ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper ms-font-s">
<i class="ms-Icon ms-Icon--x"></i>
</div>
</div>
<div class="ms-CommandBar-sideCommands">
<div class="ms-CommandBarItem">
<div class="ms-CommandBarItem-linkWrapper">
<a class="ms-CommandBarItem-link" tabindex="1">
<span class="ms-CommandBarItem-icon ms-Icon ms-Icon--reactivate"></span>
<span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Undo</span>
<i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
</a>
</div>
</div>
</div>
<div class="ms-CommandBar-mainArea">
<div class="ms-CommandBarItem">
<div class="ms-CommandBarItem-linkWrapper">
<a class="ms-CommandBarItem-link" tabindex="1">
<span class="ms-CommandBarItem-icon ms-Icon ms-Icon--star"></span>
<span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">New</span>
<i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
</a>
</div>
</div>
<div class="ms-CommandBarItem">
<div class="ms-CommandBarItem-linkWrapper">
<a class="ms-CommandBarItem-link" tabindex="1">
<span class="ms-CommandBarItem-icon ms-Icon ms-Icon--save"></span>
<span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Delete</span>
</a>
</div>
</div>
<div class="ms-CommandBarItem">
<div class="ms-CommandBarItem-linkWrapper">
<a class="ms-CommandBarItem-link" tabindex="1">
<span class="ms-CommandBarItem-icon ms-Icon ms-Icon--flag"></span>
<span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Archive</span>
</a>
</div>
</div>
<div class="ms-CommandBarItem ms-CommandBarItem--hasTextOnly">
<div class="ms-CommandBarItem-linkWrapper">
<a class="ms-CommandBarItem-link" tabindex="1">
<span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Junk</span>
</a>
</div>
</div>
<div class="ms-CommandBarItem ms-CommandBarItem--hasTextOnly">
<div class="ms-CommandBarItem-linkWrapper">
<a class="ms-CommandBarItem-link" tabindex="1">
<span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Move To</span>
<i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
</a>
</div>
</div>
<div class="ms-CommandBarItem ms-CommandBarItem--hasTextOnly">
<div class="ms-CommandBarItem-linkWrapper">
<a class="ms-CommandBarItem-link" tabindex="1">
<span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Categories</span>
<i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
</a>
</div>
</div>
<!-- Overflow Command -->
<div class="ms-CommandBarItem ms-CommandBarItem--iconOnly ms-CommandBarItem-overflow">
<div class="ms-CommandBarItem-linkWrapper">
<a class="ms-CommandBarItem-link" tabindex="2">
<span class="ms-CommandBarItem-icon ms-Icon ms-Icon--ellipsis"></span>
<span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Ellipsis</span>
<i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
</a>
</div>
<ul class="ms-CommandBar-overflowMenu ms-ContextualMenu"></ul>
</div>
<!-- End Overflow Command -->
</div>
</div>
<script>
tag to your page to instantiate all CommandBar components on the page: <script type="text/javascript">
var CommandBarElements = document.querySelectorAll(".ms-CommandBar");
for(var i = 0; i < CommandBarElements.length; i++) {
new fabric['CommandBar'](CommandBarElements[i]);
}
</script>
.ms-CommandBarItem
elements) with your content.This component has no dependencies.
Refer to the sample code to see how tabindex
attributes should be set to support keyboard navigation.