<commit_before><!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>UI Menu - Semantic</title>

  <link rel="stylesheet" class="ui" href="../src/ui/flat/panel.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/button.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/text.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/form.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/divider.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/block.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/segment.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/checkbox.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/icons.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/menu.css" type="text/css" media="screen" />
  
  <link rel="stylesheet" href="../src/modules/ui/shape.css" type="text/css" media="screen" />
  
  <link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="stylesheets/example.css" type="text/css" media="screen" />

  <script src="library/jquery.js" type="text/javascript"></script>
  <script src="library/ace/ace.js" type="text/javascript"></script>
  <script src="library/sidr.js" type="text/javascript"></script>
  <script src="library/waypoints.js" type="text/javascript"></script>
  <script src="javascript/semantic.js" type="text/javascript"></script>

  <script src="../src/modules/ui/shape.js" type="text/javascript"></script>
  <script src="../src/modules/behavior/state.js" type="text/javascript"></script>

</head>

<body id="example">

<div class="ui large vertical menu" id="menu">
  <div class="menu">
    <div class="item"><a href="module.html"><b>Introduction</b></a></div>
    <div class="item"><a href="download"><b>Download</b></a></div>
    <div class="item">
      <a><b>UI Collections</b></a>
      <div class="menu">
        <div class="item"><a href="form.html">Forms</a></div>
        <div class="active item"><a href="menu.html">Menu</a></div>
        <div class="item"><a href="element.html">Grid</a></div>
        <div class="item"><a href="table.html">Table</a></div>
        <div class="item"><a href="item.html">Items</a></div>
      </div>
    </div>
    <div class="item">
      <a><b>UI Elements</b></a>
      <div class="menu">
        <div class="item"><a href="steps.html">Steps</a></div>
        <div class="item"><a href="button.html">Button</a></div>
        <div class="item"><a href="table.html">Table</a></div>
        <div class="item"><a href="progress.html">Progress</a></div>
        <div class="item"><a href="text.html">Text Block</a></div>
        <div class="item"><a href="header.html">Headers</a></div>
        <div class="item"><a href="header.html">Segment</a></div>
        <div class="item"><a href="column.html">Columns</a></div>
        <div class="item"><a href="element.html">Elements (Grid System)</a></div>
        <div class="item"><a href="tag.html">Tags</a></div>
        <div class="item"><a href="item.html">Items (Lists of Content)</a></div>
        <div class="item"><a href="panel.html">Panels (Type of Menu)</a></div>
        <div class="item"><a href="icon.html">Icons</a></div>
        <div class="item"><a href="divider.html">Dividers</a></div>
      </div>
    </div>
    <div class="item">
      <a><b>UI Views</b></a>
      <div class="menu">
        <div class="item"><a href="form.html">Forms</a></div>
        <div class="item"><a href="activity.html">Activity Feed</a></div>
        <div class="item"><a href="list.html">Content List</a></div>
        <div class="item"><a href="user-list.html">User List</a></div>
      </div>
    </div>
    <div class="item">
      <a><b>UI Modules</b></a>
      <div class="menu">
        <div class="item"><a href="accordion.html">Accordion</a></div>
        <div class="item"><a href="chatroom.html">Chat Room</a></div>
        <div class="item"><a href="modal.html">Modal</a></div>
        <div class="item"><a href="nag.html">Nag</a></div>
        <div class="item"><a href="popup.html">Popup</a></div>
        <div class="item"><a href="search.html">Search</a></div>
        <div class="item"><a href="star.html">Star Rating</a></div>
        <div class="item"><a href="tab.html">Tabs</a></div>
      </div>
    </div>
    <div class="item">
      <a><b>Behavioral Modules</b></a>
      <div class="menu">
        <div class="item"><a href="api.html">API</a></div>
        <div class="item"><a href="animation.html">Animation</a></div>
        <div class="item"><a href="validate.html">Form Validation</a></div>
        <div class="item"><a href="placeholder.html">Placeholder Text</a></div>
        <div class="item"><a href="shape.html">Shape</a></div>
        <div class="item"><a href="state.html">State</a></div>
      </div>
    </div>
  </div>
</div>
<div class="ui fixed transparent black menu">
    <div class="container">
      <div class="title item">
        Semantic UI: Menu 
      </div>
      <div class="icon previous link item">
        <a href="table.html"><i class="icon left-open"></i></a>
      </div>
      <div class="section dropdown item">
        4 of 14
        <div class="menu">
          <a href="button.html" class="item">1. Button</a>
          <a href="form.html" class="item">2. Form</a>
          <a href="table.html" class="item">3. Table</a>
          <a class="item active">4. Menu</a>
          <a class="item">5. Elements</a>
          <a class="item">6. Tags</a>
          <a class="item">7. Items</a>
        </div>
      </div>
      <div class="icon next link item">
        <i class="icon right-open"></i>
      </div>
      <div class="right menu">
        <a class="item" href="https://github.com/quirkyinc/semantic">
          <i class="icon cloud"></i>
        </a>
        <a class="item" href="https://github.com/quirkyinc/semantic">
          <i class="icon github"></i>
        </a>
        <div class="dropdown item">
          <i class="icon tint"></i> Theme
          <div class="theme menu">
            <div class="item" data-theme="flat">Flat</div>
            <div class="item" data-theme="shaded">Shaded</div>
            <div class="item" data-theme="classic">Classic</div>
          </div>
        </div>
      </div>
    </div>
</div>
<div class="ui huge left attached vertical side buttons"> 
  <div class="ui large blue sidebar button">Menu</div>
</div>
<div class="segment">
  <div class="container">
    <h1>Menu</h1>
    <p>A menu is a ui collection made up of items. These items can be links, dropdowns, menus themselves, badges, or other standard html types.</p>
    <p>Items containing menus are formatted as sub menus. Menus containing menus are formatted as the same tier as the parent menu.</p>
  </div>
</div>
<div class="main container">
  
  <div class="peek">
    <div class="ui vertical pointing link menu">
      <div class="active item">Collection</div>
      <div class="item">Elements</div>
      <div class="item">States</div>
      <div class="item">Variations</div>
    </div>
  </div>
  
  <h2>Collection</h2>
  <div class="example">
    <h4>Menu</h4>
    
    <p>This example uses several menu elements to display the versatility of a menu collection.</p>
    <div class="ui menu">
      <div class="item">
        Site Title
      </div>
      <div class="active item">
        <a>Current section</a>
      </div>
      <div class="item">
        <a>Section 1</a>
      </div>
      <div class="item">
        <a>
          <div class="badge">2</div>
          <i class="icon mail"></i>
        </a>
      </div>
      <div class="right menu">
        <div class="fitted borderless item">
            <input class="ui input" type="text" placeholder="Search...">
        </div>
        <div class="dropdown item">
          Dropdown <i class="icon down-dir"></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>

  <div class="example">
    <h4>Vertical Menu</h4>
    <p>This example uses several menu elements, an unclickable block, a clickable text link, a clickable icon link, and a dropdown group</p>
    <div class="ui ignore warning block"><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">
      <div class="item">
        <b>Site Title</b>
      </div>
      <div class="item">
        <p>This is a paragraph of expository text</p>
      </div>
      <div class="item">
        <a>Grouped Section</a>
        <div class="menu">
          <a class="active item">Current Section</a>
          <a class="item">Subsection 2</a>
          <a class="item">Subsection 3</a>
        </div>
      </div>
      <div class="dropdown item">
        Dropdown <i class="icon right-dir"></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>

  <h2>Elements</h2>

  <div class="example">
    <h4>Text Item</h4>
    <p>A menu may have a simple text item</p>
    <div class="ui vertical menu">
      <div class="item">
        Text Item
      </div>
    </div>
  </div>
  <div class="example">
    <h4>Link Item</h4>
    <p>A menu may have either a real page link or an item that behaves as a link.</p>
    <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>Dropdown Item</h4>
    <p>An item may contain a list of dropdowns to chose from. By default it will appear automatically with css.</p>
    <div class="ui ignore warning block">
      <p>A dropdown menu will, by default, automatically show when the parent element is hovered.</p>
      <p>If you need to programmatically close the dropdown, use the "stateful" variant and the javascript state module, which will allow you to manipulate the state directly.</p>
    </div>
    <div class="ui vertical menu">
      <div class="dropdown item">
        Dropdown <i class="icon right-dir"></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>Menu</h4>
    <p>A menu may contain another menu group inside. This can be useful for formatting multiple menu items with the same qualities.</p>
    <div class="ui menu">
      <div class="item">Left item 1</div>
      <div class="item">Left item 2</div>
      <div class="right menu">
        <div class="item">Right item 1</div>
        <div class="item">Right item 2</div>
      </div>
    </div>
  </div>

  <div class="example"><commit_msg>formatting fix<commit_after><!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>UI Menu - Semantic</title>

  <link rel="stylesheet" class="ui" href="../src/ui/flat/panel.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/button.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/text.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/form.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/divider.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/block.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/segment.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/checkbox.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/icons.css" type="text/css" media="screen" />
  <link rel="stylesheet" class="ui" href="../src/ui/flat/menu.css" type="text/css" media="screen" />
  
  <link rel="stylesheet" href="../src/modules/ui/shape.css" type="text/css" media="screen" />
  
  <link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="stylesheets/example.css" type="text/css" media="screen" />

  <script src="library/jquery.js" type="text/javascript"></script>
  <script src="library/ace/ace.js" type="text/javascript"></script>
  <script src="library/sidr.js" type="text/javascript"></script>
  <script src="library/waypoints.js" type="text/javascript"></script>
  <script src="javascript/semantic.js" type="text/javascript"></script>

  <script src="../src/modules/ui/shape.js" type="text/javascript"></script>
  <script src="../src/modules/behavior/state.js" type="text/javascript"></script>

</head>

<body id="example">

<div class="ui large vertical menu" id="menu">
  <div class="menu">
    <div class="item"><a href="module.html"><b>Introduction</b></a></div>
    <div class="item"><a href="download"><b>Download</b></a></div>
    <div class="item">
      <a><b>UI Collections</b></a>
      <div class="menu">
        <div class="item"><a href="form.html">Forms</a></div>
        <div class="active item"><a href="menu.html">Menu</a></div>
        <div class="item"><a href="element.html">Grid</a></div>
        <div class="item"><a href="table.html">Table</a></div>
        <div class="item"><a href="item.html">Items</a></div>
      </div>
    </div>
    <div class="item">
      <a><b>UI Elements</b></a>
      <div class="menu">
        <div class="item"><a href="steps.html">Steps</a></div>
        <div class="item"><a href="button.html">Button</a></div>
        <div class="item"><a href="table.html">Table</a></div>
        <div class="item"><a href="progress.html">Progress</a></div>
        <div class="item"><a href="text.html">Text Block</a></div>
        <div class="item"><a href="header.html">Headers</a></div>
        <div class="item"><a href="header.html">Segment</a></div>
        <div class="item"><a href="column.html">Columns</a></div>
        <div class="item"><a href="element.html">Elements (Grid System)</a></div>
        <div class="item"><a href="tag.html">Tags</a></div>
        <div class="item"><a href="item.html">Items (Lists of Content)</a></div>
        <div class="item"><a href="panel.html">Panels (Type of Menu)</a></div>
        <div class="item"><a href="icon.html">Icons</a></div>
        <div class="item"><a href="divider.html">Dividers</a></div>
      </div>
    </div>
    <div class="item">
      <a><b>UI Views</b></a>
      <div class="menu">
        <div class="item"><a href="form.html">Forms</a></div>
        <div class="item"><a href="activity.html">Activity Feed</a></div>
        <div class="item"><a href="list.html">Content List</a></div>
        <div class="item"><a href="user-list.html">User List</a></div>
      </div>
    </div>
    <div class="item">
      <a><b>UI Modules</b></a>
      <div class="menu">
        <div class="item"><a href="accordion.html">Accordion</a></div>
        <div class="item"><a href="chatroom.html">Chat Room</a></div>
        <div class="item"><a href="modal.html">Modal</a></div>
        <div class="item"><a href="nag.html">Nag</a></div>
        <div class="item"><a href="popup.html">Popup</a></div>
        <div class="item"><a href="search.html">Search</a></div>
        <div class="item"><a href="star.html">Star Rating</a></div>
        <div class="item"><a href="tab.html">Tabs</a></div>
      </div>
    </div>
    <div class="item">
      <a><b>Behavioral Modules</b></a>
      <div class="menu">
        <div class="item"><a href="api.html">API</a></div>
        <div class="item"><a href="animation.html">Animation</a></div>
        <div class="item"><a href="validate.html">Form Validation</a></div>
        <div class="item"><a href="placeholder.html">Placeholder Text</a></div>
        <div class="item"><a href="shape.html">Shape</a></div>
        <div class="item"><a href="state.html">State</a></div>
      </div>
    </div>
  </div>
</div>
<div class="ui fixed transparent black menu">
    <div class="container">
      <div class="title item">
        Semantic UI: Menu 
      </div>
      <div class="icon previous link item">
        <a href="table.html"><i class="icon left-open"></i></a>
      </div>
      <div class="section dropdown item">
        4 of 14
        <div class="menu">
          <a href="button.html" class="item">1. Button</a>
          <a href="form.html" class="item">2. Form</a>
          <a href="table.html" class="item">3. Table</a>
          <a class="item active">4. Menu</a>
          <a class="item">5. Elements</a>
          <a class="item">6. Tags</a>
          <a class="item">7. Items</a>
        </div>
      </div>
      <div class="icon next link item">
        <i class="icon right-open"></i>
      </div>
      <div class="right menu">
        <a class="item" href="https://github.com/quirkyinc/semantic">
          <i class="icon cloud"></i>
        </a>
        <a class="item" href="https://github.com/quirkyinc/semantic">
          <i class="icon github"></i>
        </a>
        <div class="dropdown item">
          <i class="icon tint"></i> Theme
          <div class="theme menu">
            <div class="item" data-theme="flat">Flat</div>
            <div class="item" data-theme="shaded">Shaded</div>
            <div class="item" data-theme="classic">Classic</div>
          </div>
        </div>
      </div>
    </div>
</div>
<div class="ui huge left attached vertical side buttons"> 
  <div class="ui large blue sidebar button">Menu</div>
</div>
<div class="segment">
  <div class="container">
    <h1>Menu</h1>
    <p>A menu is a ui collection made up of items. These items can be links, dropdowns, menus themselves, badges, or other standard html types.</p>
    <p>Items containing menus are formatted as sub menus. Menus containing menus are formatted as the same tier as the parent menu.</p>
  </div>
</div>
<div class="main container">
  
  <div class="peek">
    <div class="ui vertical pointing link menu">
      <div class="active item">Collection</div>
      <div class="item">Elements</div>
      <div class="item">States</div>
      <div class="item">Variations</div>
    </div>
  </div>
  
  <h2>Collection</h2>
  <div class="example">
    <h4>Menu</h4>
    
    <p>This example uses several menu elements to display the versatility of a menu collection.</p>
    <div class="ui menu">
      <div class="item">
        Site Title
      </div>
      <div class="active item">
        <a>Current section</a>
      </div>
      <div class="item">
        <a>Section 1</a>
      </div>
      <div class="item">
        <a>
          <div class="badge">2</div>
          <i class="icon mail"></i>
        </a>
      </div>
      <div class="right menu">
        <div class="fitted borderless item">
            <input class="ui input" type="text" placeholder="Search...">
        </div>
        <div class="dropdown item">
          Dropdown <i class="icon down-dir"></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>

  <div class="example">
    <h4>Vertical Menu</h4>
    <p>This example uses several menu elements, an unclickable block, a clickable text link, a clickable icon link, and a dropdown group</p>
    <div class="ui ignore warning block"><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">
      <div class="item">
        <b>Site Title</b>
      </div>
      <div class="item">
        <p>This is a paragraph of expository text</p>
      </div>
      <div class="item">
        <a>Grouped Section</a>
        <div class="menu">
          <a class="active item">Current Section</a>
          <a class="item">Subsection 2</a>
          <a class="item">Subsection 3</a>
        </div>
      </div>
      <div class="dropdown item">
        Dropdown <i class="icon right-dir"></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>

  <h2>Elements</h2>

  <div class="example">
    <h4>Text Item</h4>
    <p>A menu may have a simple text item</p>
    <div class="ui vertical menu">
      <div class="item">
        Text Item
      </div>
    </div>
  </div>
  <div class="example">
    <h4>Link Item</h4>
    <p>A menu may have either a real page link or an item that behaves as a link.</p>
    <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>Dropdown Item</h4>
    <p>An item may contain a list of dropdowns to chose from. By default it will appear automatically with css.</p>
    <div class="ui ignore warning block">
      <i class="icon heart"></i> A dropdown menu will, by default, automatically show when the parent element is hovered. 
      If you need to programmatically close the dropdown, use the "stateful" variant and the javascript state module, which will allow you to manipulate the state directly.
    </div>
    <div class="ui vertical menu">
      <div class="dropdown item">
        Dropdown <i class="icon right-dir"></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>Menu</h4>
    <p>A menu may contain another menu group inside. This can be useful for formatting multiple menu items with the same qualities.</p>
    <div class="ui menu">
      <div class="item">Left item 1</div>
      <div class="item">Left item 2</div>
      <div class="right menu">
        <div class="item">Right item 1</div>
        <div class="item">Right item 2</div>
      </div>
    </div>
  </div>

  <div class="example">
{'fraction_non_alphanumeric': 0.19997388238366778, 'fraction_numerical': 0.004004701170939799, 'mean_word_length': 2.841163685002508, 'pattern_counts': {'":': 0, '<': 965, '<?xml version=': 0, '>': 965, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2794779', 'n_tokens_mistral': 7512, 'n_tokens_neox': 7384, 'n_words': 1811}