English Español Claro Oscuro Sistema

Navigation Item

<gstock-navigation-item> | GstockNavigationItem

Ejemplos

Menus are organizational tools that enhance the readability and organization of content.

Menu Item Submenu Item Submenu Item Submenu Item 
<gstock-navigation-item>
  Menu Item
  <gstock-navigation-menu slot="menu">
    <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
    <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
    <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
  </gstock-navigation-menu>
</gstock-navigation-item>

Orientation

Menus are organizational tools that enhance the readability and organization of content.

Use orientation attribute to choose the orientation of the navigation, it can be horizontal or vertical. By default, the behavior is set to behave horizontally.

Horizontal

Use orientation attribute with horizontal value.

Menu Item Submenu Item Submenu Item Submenu Item Submenu Item Submenu Item Submenu Item Submenu Item Submenu Item Submenu Item 
<gstock-navigation-item icon="layers" orientation="horizontal">
  Menu Item
  <gstock-navigation-menu slot="menu">
    <gstock-navigation-menu-item>
      Submenu Item
      <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
    </gstock-navigation-menu-item>
    <gstock-navigation-menu-item>
      Submenu Item
      <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
    </gstock-navigation-menu-item>
    <gstock-navigation-menu-item>
      Submenu Item
      <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
    </gstock-navigation-menu-item>
  </gstock-navigation-menu>
</gstock-navigation-item>

Vertical

Use orientation attribute with vertical value.

Menu Item Submenu Item Submenu Item Submenu Item Submenu Item Submenu Item Submenu Item Submenu Item Submenu Item Submenu Item 
<gstock-navigation-item icon="layers" orientation="vertical">
  Menu Item
  <gstock-navigation-menu slot="menu">
    <gstock-navigation-menu-item>
      Submenu Item
      <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
    </gstock-navigation-menu-item>
    <gstock-navigation-menu-item>
      Submenu Item
      <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
    </gstock-navigation-menu-item>
    <gstock-navigation-menu-item>
      Submenu Item
      <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
      <gstock-navigation-menu-item>Submenu Item</gstock-navigation-menu-item>
    </gstock-navigation-menu-item>
  </gstock-navigation-menu>
</gstock-navigation-item>

Disabled

Use the disabled attribute to disable the menu item so it cannot be selected.

Dashboard Menu Item Menu Item 
<gstock-navigation-item icon="home">Dashboard</gstock-navigation-item>
<gstock-navigation-item icon="inbox" disabled>Menu Item</gstock-navigation-item>
<gstock-navigation-item icon="layers">Menu Item</gstock-navigation-item>

Use the href attribute to make the component render an <a> under the hood. This gives you all the default link behavior the browser provides and exposes the target and download attributes.

Link New Window Download Disabled 
<gstock-navigation-item icon="link" href="https://example.com/">
  Link
</gstock-navigation-item>
<gstock-navigation-item icon="external-link" href="https://example.com/" target="_blank">
  New Window
</gstock-navigation-item>
<gstock-navigation-item icon="download" href="/assets/images/wordmark.svg" download="gstock.svg">
  Download
</gstock-navigation-item>
<gstock-navigation-item icon="x-circle" href="https://example.com/" disabled>
  Disabled
</gstock-navigation-item>