<commit_before># Menu

Los menús son patrones utilizados en todo tipo de interfaces para navegar entre secciones de una aplicación o sitio web. Adicionalmente se pueden utilizar para ejecutar acciones del sistema. Posee dos direciones comunes: vertical y horizontal.

### Vertical

<iframe class="code-preview" height="250px"></iframe>
<textarea class="code-editor" name="code">
<body class="theme-dark">
<ul class="menu border">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="active"><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>
</body>
</textarea>

### Horizontal

<iframe class="code-preview" height="100px"></iframe>
<textarea class="code-editor" name="code">
<ul class="menu is-horizontal">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="active"><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>
</textarea>

### Dark Mode

Puedes utilizar la clase `theme-dark` para aplicar los colores del modo oscuro en este componente.

<iframe class="code-preview" height="520px"></iframe>
<textarea class="code-editor" name="code">
<ul class="menu theme-dark">
  <li class="menu-section">SECTION 1</li>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="active"><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
  <li class="menu-section">SECTION 2</li>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li><commit_msg>Docs updated<commit_after># Menu

Los menús son patrones utilizados en todo tipo de interfaces para navegar entre secciones de una aplicación o sitio web. Adicionalmente se pueden utilizar para ejecutar acciones del sistema. Posee dos direciones comunes: vertical y horizontal.

### Vertical

<iframe class="code-preview" height="250px"></iframe>
<textarea class="code-editor" name="code">
<ul class="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="active"><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>
</textarea>

### Horizontal

<iframe class="code-preview" height="100px"></iframe>
<textarea class="code-editor" name="code">
<ul class="menu is-horizontal">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="active"><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>
</textarea>

### Dark Mode

Puedes utilizar la clase `theme-dark` para aplicar los colores del modo oscuro en este componente.

<iframe class="code-preview" height="520px"></iframe>
<textarea class="code-editor" name="code">
<ul class="menu theme-dark">
  <li class="menu-section">SECTION 1</li>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="active"><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
  <li class="menu-section">SECTION 2</li>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
{'fraction_non_alphanumeric': 0.245349583066068, 'fraction_numerical': 0.01796023091725465, 'mean_word_length': 5.0680933852140075, 'pattern_counts': {'":': 0, '<': 181, '<?xml version=': 0, '>': 181, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3074331', 'n_tokens_mistral': 1218, 'n_tokens_neox': 1115, 'n_words': 298}