|
|
---layout : 'default'css : 'menu'
title : 'Menu'description : 'A menu is a collection of elements showing related user actions'type : 'UI Collection'
element : 'menu'elementType : 'collection'themes : ['default', 'github']---<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/menu.less" /><script src="/javascript/menu.js"></script>
<%- @partial('header') %>
<div class="main container">
<div class="peek"> <div class="ui vertical pointing secondary menu"> <a class="active item">Types</a> <a class="item">Elements</a> <a class="item">States</a> <a class="item">Variations</a> </div> </div>
<h2 class="ui dividing header">Types</h2> <div class="example"> <h4 class="ui header">Menu</h4>
<p>A menu</p> <div class="ui menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <div class="right menu"> <div class="item"> <div class="ui icon input"> <input type="text" placeholder="Search..."> <i class="search link icon"></i> </div> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Vertical Menu</h4> <p>A vertical menu displays elements vertically..</p> <div class="ui ignore warning message"><i class="icon heart"></i> A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with <a href="grid.html">ui grid</a>.</div>
<div class="ui vertical menu"> <a class="active teal item"> Inbox <div class="ui teal label">1</div> </a> <a class="item"> Spam <div class="ui label">51</div> </a> <a class="item"> Updates <div class="ui label">1</div> </a> <div class="item"> <div class="ui small icon input"> <input type="text" placeholder="Search mail..."> <i class="search icon"></i> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Pagination</h4> <p>A pagination menu is specially formatted to present links to pages of content</p> <div class="ui pagination menu"> <a class="icon item"> <i class="left arrow icon"></i> </a> <a class="active item"> 1 </a> <div class="disabled item"> ... </div> <a class="item"> 10 </a> <a class="item"> 11 </a> <a class="item"> 12 </a> <a class="icon item"> <i class="right arrow icon"></i> </a> </div> </div>
<div class="example"> <h4 class="ui header">Tabular</h4> <p>A message can be formatted to show tabs of information</p> <div class="ui tabular menu"> <a class="active item"> Bio </a> <a class="item"> Pics </a> </div> </div>
<div class="example"> <h4 class="ui header">Tiered Menu</h4> <p>A tiered menu can show the sub-sections available as part of an activated section.</p> <div class="ui tiered menu"> <div class="menu"> <a class="active item"> <i class="users icon"></i> Friends </a> <a class="item"> <i class="grid layout icon"></i> Browse </a> <a class="item"> <i class="mail icon"></i> Messages </a> <div class="right menu"> <div class="item"> <div class="ui icon input"> <input type="text" placeholder="Search..."> <i class="search icon"></i> </div> </div> <div class="ui dropdown item"> More <i class="icon dropdown"></i> <div class="menu"> <a class="item"><i class="edit icon"></i> Edit Profile</a> <a class="item"><i class="globe icon"></i> Choose Language</a> <a class="item"><i class="settings icon"></i> Account Settings</a> </div> </div> </div> </div> <div class="ui sub menu"> <a class="active item">Search</a> <a class="item">Add</a> <a class="item">Remove</a> </div> </div> </div>
<div class="example"> <h4 class="ui header">Vertical Menu w/ Sub Menus</h4> <p>A tiered menu can show the sub-sections available as part of an activated section.</p> <div class="ui vertical menu"> <div class="item"> <div class="ui input"><input type="text" placeholder="Search..."></div> </div> <div class="item"> <i class="home icon"></i> Home <div class="menu"> <a class="active item">Search</a> <a class="item">Add</a> <a class="item">Remove</a> </div> </div> <a class="item"> <i class="grid layout icon"></i> Browse </a> <a class="item"> <i class="mail icon"></i> Messages </a> <div class="ui dropdown item"> More <i class="dropdown icon"></i> <div class="menu"> <a class="item"><i class="edit icon"></i> Edit Profile</a> <a class="item"><i class="globe icon"></i> Choose Language</a> <a class="item"><i class="settings icon"></i> Account Settings</a> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Secondary Menu</h4> <p>A secondary menu allows for a section of content on a page to be activated</p> <div class="ui secondary menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> <div class="right menu"> <div class="item"> <div class="ui icon input"> <input type="text" placeholder="Search..."> <i class="search link icon"></i> </div> </div> <a class="ui item"> Logout </a> </div> </div> </div>
<div class="another example"> <div class="ui secondary vertical menu"> <a class="active item"> <i class="users icon"></i> Friends </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> <div class="ui dropdown item"> More <i class="dropdown icon"></i> <div class="menu"> <a class="item"><i class="edit icon"></i> Edit Profile</a> <a class="item"><i class="globe icon"></i> Choose Language</a> <a class="item"><i class="settings icon"></i> Account Settings</a> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Pointing</h4> <p>A menu can point to content to show relationship</p> <div class="ui pointing menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> <div class="right menu"> <div class="item"> <div class="ui icon input"> <input type="text" placeholder="Search..."> <i class="search link icon"></i> </div> </div> <div class="ui dropdown item"> Language <i class="dropdown icon"></i> <div class="menu"> <a class="item">English</a> <a class="item">Russian</a> <a class="item">Spanish</a> </div> </div> </div> </div> </div> <div class="another example"> <div class="ui vertical pointing menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> </div> <div class="another example"> <div class="ui secondary pointing menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> <div class="right menu"> <div class="item"> <div class="ui icon input"> <input type="text" placeholder="Search..."> <i class="search link icon"></i> </div> </div> <a class="ui item"> Logout </a> </div> </div> </div> <div class="another example"> <div class="ui secondary vertical pointing menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> </div>
<div class="example"> <h4 class="ui header">Text</h4> <p>A menu can display simple text links</p> <div class="ui text menu"> <div class="header item">Sort By</div> <a class="active item"> <i class="home icon"></i> Closest </a> <a class="item"> <i class="mail icon"></i> Most Comments </a> <a class="item"> <i class="user icon"></i> Most Popular </a> </div> </div> <div class="another example"> <div class="ui vertical text menu"> <div class="header item">Sort By</div> <a class="active item"> <i class="home icon"></i> Closest </a> <a class="item"> <i class="mail icon"></i> Most Comments </a> <a class="item"> <i class="user icon"></i> Most Popular </a> </div> </div>
<h2 class="ui dividing header">Elements</h2>
<div class="example"> <h4 class="ui header">Header Item</h4> <p>A menu may have a header to help label sections of a menu.</p> <div class="ui vertical menu"> <div class="header item"> <i class="user icon"></i> Communities </div> <div class="item"> College <div class="menu"> <a class="item">Baseball</a> <a class="item">Basketball</a> <a class="item">Golf</a> </div> </div> <a class="item"> Dance </a> <a class="item"> Aerobics </a> <div class="header item"> <i class="globe icon"></i> Cities </div> <a class="item"> New York </a> <a class="item"> Montreal </a> <a class="item"> Los Angeles </a> <a class="item"> San Francisco </a> <div class="header item"> <i class="icon calendar"></i> Months </div> <a class="item"> August </a> <a class="item"> June </a> </div> </div>
<div class="example"> <h4 class="ui header">Text Item</h4> <p>A menu may have a simple text item.</p> <div class="ui ignore info message"> <p><i class="icon heart"></i> Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname <b>text</b></p> </div> <div class="ui vertical menu"> <div class="header item"> Promotions <span class="ui teal label">New</span> </div> <div class="text item"> <a>Join now</a> and save $10 on a pro membership! </div> <div class="item"> <p><a>Join tomorrow</a> and save $5 on pro.</p> </div> </div> </div>
<div class="example"> <h4 class="ui header">Input</h4> <p>A menu item can contain an <a href="/elements/input.html">input</a> inside of it</p> <div class="ui menu"> <div class="right item"> <div class="ui icon input"> <input type="text" placeholder="Search..."> <i class="search icon"></i> </div> </div> <div class="item"> <div class="ui action input"> <input type="text" placeholder="Navigate to..."> <div class="ui button">Go</div> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Button</h4> <p>A menu item can contain a <a href="/elements/button.html">button</a> inside of it</p>
<div class="ui menu"> <div class="item"> <div class="ui primary button">Sign up</div> </div> <div class="item"> <div class="ui button">Log-in</div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Link Item</h4> <p>A menu may contain a link item, or an item formatted as if it is a link.</p>
<div class="ui ignore info message"> <p><i class="icon heart"></i> Items that are anchor tags will automatically be formatted as a link.</p> </div> <div class="ui vertical menu"> <a href="http://www.google.com" class="item"> Visit Google </a> <div class="link item"> Javascript Link </div> </div> </div>
<div class="example"> <h4 class="ui header">Dropdown Item</h4> <p>An item may contain a nested menu in a dropdown.</p> <div class="ui ignore warning message"> <p><i class="icon heart"></i>Dropdowns use <a href="/modules/dropdown.html">UI dropdown elements</a>. To have a dropdown open without javascript, use the simple variation</p> </div> <div class="ui vertical menu"> <div class="ui dropdown item"> Categories <i class="dropdown icon"></i> <div class="menu"> <a class="item">Electronics</a> <a class="item">Automotive</a> <a class="item">Home</a> </div> </div> </div> </div> <div class="example"> <h4 class="ui header">Menu</h4> <p>A menu may contain another menu group in the same level as menu items.</p> <div class="ui menu"> <a class="item">Browse</a> <a class="item">Submit</a> <div class="right menu"> <a class="item">Sign Up</a> <a class="item">Help</a> </div> </div> </div>
<div class="example"> <h4 class="ui header">Nested Menu</h4> <p>A menu item may contain another menu nested inside that acts as a grouped sub-menu.</p> <div class="ui vertical menu"> <a class="item"><b>Friends</b></a> <div class="item"> <a><b>Your Profile</b></a> <div class="menu"> <a class="item">Inbox</a> <a class="item">Activity</a> <a class="item">Groups</a> </div> </div> </div> </div>
<h2 class="ui dividing header">States</h2>
<div class="example"> <h4 class="ui header">Hover</h4> <p>A menu item can be hovered</p> <div class="ui ignore warning message"><i class="icon heart"></i> Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.</div> <div class="ui compact menu"> <div class="hover item"> Link </div> </div> </div>
<div class="example"> <h4 class="ui header">Down</h4> <p>A menu item can be pressed in</p> <div class="ui compact menu"> <div class="down item"> Link </div> </div> </div>
<div class="example"> <h4 class="ui header">Active</h4> <p>A menu item can be active</p> <div class="ui compact menu"> <div class="active item"> Link </div> </div> </div>
<h2 class="ui dividing header">Variations</h2>
<h3 class="ui header">Menu</h3> <div class="example"> <h4 class="ui header">Inverted</h4> <p>A menu may have its colors inverted to show greater contrast</p> <div class="ui inverted menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> </div> <div class="example"> <h4 class="ui header">Colors</h4> <p>Additional colors can be specified.</p> <div class="ui menu"> <a class="active green item"> <i class="home icon"></i> Green </a> <a class="red item"> <i class="mail icon"></i> Red </a> <a class="blue item"> <i class="user icon"></i> Blue </a> <a class="orange item"> <i class="home icon"></i> Orange </a> <a class="purple item"> <i class="mail icon"></i> Purple </a> <a class="teal item"> <i class="user icon"></i> Teal </a> </div> <br> <div class="ui red menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> <br> <div class="ui blue menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> <br> <div class="ui orange menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> <br> <div class="ui purple menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> <br> <div class="ui teal menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> </div> <div class="another example"> <p>These colors can also be inverted</p> <div class="ui green inverted menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> <br> <div class="ui red inverted menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> <br> <div class="ui blue inverted menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> <br> <div class="ui orange inverted menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> <br> <div class="ui purple inverted menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> <br> <div class="ui teal inverted menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a> <a class="item"> <i class="user icon"></i> Friends </a> </div> </div>
<div class="example"> <h4 class="ui header">Icons</h4> <p>A menu may have just icons</p> <div class="ui icon menu"> <a class="red item"> <i class="mail icon"></i> </a> <a class="teal item"> <i class="lab icon"></i> </a> <a class="green item"> <i class="star icon"></i> </a> </div> <br><br> <div class="ui vertical icon menu"> <a class="red item"> <i class="mail icon"></i> </a> <a class="teal item"> <i class="lab icon"></i> </a> <a class="green item"> <i class="star icon"></i> </a> </div> </div>
<div class="example"> <h4 class="ui header">Icons</h4> <p>A menu may have labeled icons</p> <div class="ui labeled icon menu"> <a class="red item"> <i class="mail icon"></i> Mail </a> <a class="teal item"> <i class="lab icon"></i> Lab </a> <a class="green item"> <i class="star icon"></i> Favorites </a> </div> <br><br> <div class="ui vertical labeled icon menu"> <a class="red item"> <i class="mail icon"></i> Mail </a> <a class="teal item"> <i class="lab icon"></i> Lab </a> <a class="green item"> <i class="star icon"></i> Favorites </a> </div> </div>
<div class="example"> <h4 class="ui header">Fluid</h4> <p>A vertical menu may take the size of its container. (A horizontal menu does this by default) </p> <div class="ui fluid vertical menu"> <a class="item">Run</a> <a class="item">Walk</a> <a class="item">Bike</a> </div> </div>
<div class="example"> <h4 class="ui header">Evenly sized items</h4> <p>A menu may divide its items evenly</p> <div class="ui fluid three item menu"> <a class="item">Buy</a> <a class="item">Sell</a> <a class="item">Rent</a> </div> </div>
<div class="example"> <p>A vertical menu can point to content adjacent to itself to show ownership</p> <div class="ui pointing vertical menu"> <a class="item"> Site Title </a> <div class="item"> <b>Grouped Section</b> <div class="menu"> <a class="item">Subsection 1</a> <a class="active item">Subsection 1</a> <a class="item">Subsection 1</a> </div> </div> <div class="ui dropdown item"> Dropdown <i class="dropdown icon"></i> <div class="menu"> <div class="item">Choice 1</div> <div class="item">Choice 2</div> <div class="item">Choice 3</div> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Attached</h4> <p>A menu may be attached to other content segments</p> <div class="ui top attached tabular menu"> <a class="active item"> Tab 1 </a> <a class="item"> Tab 2 </a> </div> <div class="ui bottom attached segment"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </div> </div>
<div class="example"> <h4 class="ui header">Horizontal Sizes</h4> <p>A horizontal menu can vary in size</p> <div class="ui large menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a>1 <div class="right menu"> <div class="item"> <div class="ui icon input"> <input type="text" placeholder="Search..."> <i class="search link icon"></i> </div> </div> <div class="ui dropdown item"> Language <i class="dropdown icon"></i> <div class="menu"> <a class="item">English</a> <a class="item">Russian</a> <a class="item">Spanish</a> </div> </div> <div class="item"> <div class="ui primary button">Sign Up</div> </div> </div> </div> </div> <div class="another example"> <div class="ui small menu"> <a class="active item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="mail icon"></i> Messages </a>1 <div class="right menu"> <div class="item"> <div class="ui icon input"> <input type="text" placeholder="Search..."> <i class="search link icon"></i> </div> </div> <div class="ui dropdown item"> Language <i class="dropdown icon"></i> <div class="menu"> <a class="item">English</a> <a class="item">Russian</a> <a class="item">Spanish</a> </div> </div> <div class="item"> <div class="ui primary button">Sign Up</div> </div> </div> </div> </div> <div class="example"> <p>A vertical menu can also vary in size</p> <div class="ui large vertical menu"> <a class="active item"> <div class="ui teal label">1</div> Inbox </a> <a class="item"> <div class="ui label">51</div> Spam </a> <a class="item"> <div class="ui label">1</div> Updates </a> <div class="item"> <div class="ui icon input"> <input type="text" placeholder="Search mail..."> <i class="search icon"></i> </div> </div> </div> </div> <div class="another example"> <div class="ui small vertical menu"> <a class="active item"> <div class="ui small teal label">1</div> Inbox </a> <a class="item"> <div class="ui small label">51</div> Spam </a> <a class="item"> <div class="ui small label">1</div> Updates </a> <div class="item"> <div class="ui icon input"> <input type="text" placeholder="Search mail..."> <i class="search icon"></i> </div> </div> </div> </div>
<h3 class="ui header">Items</h3>
<div class="example"> <h4 class="ui header">Fitted</h4> <p>A menu item or menu can remove element padding, vertically or horizontally</p> <div class="ui menu"> <div class="fitted item"> No padding whatsoever </div> <div class="horizontally fitted item"> No horizontal padding </div> <div class="vertically fitted item"> No vertical padding </div> </div> </div>
<div class="example"> <h4 class="ui header">Borderless</h4> <p>A menu item or menu can have no borders</p> <div class="ui borderless pagination menu"> <a class="item"> <i class="left arrow icon"></i> Previous </a> <a class="item">1</a> <a class="item">2</a> <a class="item">3</a> <a class="item">4</a> <a class="item">5</a> <a class="item">6</a> <a class="item"> Next <i class="icon right arrow"></i> </a> </div> </div>
</div>
|
