import{a as o}from"./iframe-BaLO-W8Q.js";import"./preload-helper-PPVm8Dsz.js";function r(){return`
	<nav class="navbar navbar-default inail-horizontal-menu" aria-label="Menù dell'applicativo" id="menu-applicativo">
  <span class="sr-only"></span>
<div class="container-fluid">
    <div class="navbar-header d-flex align-items-center">
  <button type="button"
          class="navbar-toggle collapsed me-2"
          data-toggle="collapse"
          data-target="#inail-hm-main-navbar"
          aria-controls="inail-hm-main-navbar"
         >
    
      <i class="fa fa-bars inail-icon" aria-hidden="true"></i>
      <i class="fa fa-times inail-icon" aria-hidden="true"></i>
  
  </button>
  <span class="inail-mobile-menu-title">Menu</span>
</div>

    <div class="collapse navbar-collapse" id="inail-hm-main-navbar">
    <div class="inail-hm-menu-panel active" id="inail-hm-mobile-panel-root">
      <ul class="nav navbar-nav">
        <li><a href="javascript:void(0)">Livello 0</a></li>
        <li><a href="javascript:void(0)">Livello 0</a></li>
        <li><a href="javascript:void(0)">Livello 0</a></li>
        <li><a href="javascript:void(0)">Livello 0</a></li>
        <li><a href="javascript:void(0)">Livello 0</a></li>
        <li><a href="javascript:void(0)">Livello 0</a></li>
     
       </ul>
	
       
      
    </div>
	</div>

</nav>
	`}function s(){return`
	<nav class="navbar navbar-default inail-horizontal-menu" aria-label="Menù dell'applicativo" id="menu-applicativo">
<div class="container-fluid">
    <div class="navbar-header d-flex align-items-center">
  <button type="button"
          class="navbar-toggle collapsed me-2"
          data-toggle="collapse"
          data-target="#inail-hm-main-navbar"
          aria-controls="inail-hm-main-navbar"
         >
    
      <i class="fa fa-bars inail-icon" aria-hidden="true"></i>
      <i class="fa fa-times inail-icon" aria-hidden="true"></i>
  
  </button>
  <span class="inail-mobile-menu-title">Menu</span>
</div>

    <div class="collapse navbar-collapse" id="inail-hm-main-navbar">
    <div class="inail-hm-menu-panel active" id="inail-hm-mobile-panel-root">
      <ul class="nav navbar-nav">
        <li><a href="javascript:void(0)">Livello 0</a></li>
        <!-- Dropdown example -->
        <li class="dropdown">
          <button class="dropdown-toggle inail-hm-nav-link-btn">Livello 0 <i class="fa-solid fa-caret-down"></i></button>
          <ul class="dropdown-menu inail-panel-menu-body inail-panel-menu-body-bt">
             <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
             <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <button class="dropdown-toggle inail-hm-nav-link-btn">Livello 0 <i class="fa-solid fa-caret-down"></i></button>
          <ul class="dropdown-menu inail-panel-menu-body inail-panel-menu-body-bt">
            
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
          </ul>
        </li>

        <li><a href="javascript:void(0)">Livello 0</a></li>

        <li class="dropdown">
          <button class="dropdown-toggle inail-hm-nav-link-btn">Livello 0 <i class="fa-solid fa-caret-down"></i></button>
          <ul class="dropdown-menu inail-panel-menu-body inail-panel-menu-body-bt">
            
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <button class="dropdown-toggle inail-hm-nav-link-btn">Livello 0 <i class="fa-solid fa-caret-down"></i></button>
          <ul class="dropdown-menu inail-panel-menu-body inail-panel-menu-body-bt">
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
          </ul>
        </li>
     
       </ul>
	
       
      
    </div>
	</div>

</nav>
	`}function t(){return`<nav class="navbar navbar-default inail-horizontal-menu" aria-label="Menù dell'applicativo" id="menu-applicativo">
<div class="container-fluid">
    <div class="navbar-header d-flex align-items-center">
  <button type="button"
          class="navbar-toggle collapsed me-2"
          data-toggle="collapse"
          data-target="#inail-hm-main-navbar"
          aria-controls="inail-hm-main-navbar"
         >
    
      <i class="fa fa-bars inail-icon" aria-hidden="true"></i>
      <i class="fa fa-times inail-icon" aria-hidden="true"></i>
  
  </button>
  <span class="inail-mobile-menu-title">Menu</span>
</div>

    <div class="collapse navbar-collapse" id="inail-hm-main-navbar">
    <div class="inail-hm-menu-panel active" id="inail-hm-mobile-panel-root">
      <ul class="nav navbar-nav">
        <li><a href="javascript:void(0)">Livello 0</a></li>
        <!-- Dropdown example -->
        <li class="dropdown">
          <button class="dropdown-toggle inail-hm-nav-link-btn">Livello 0 <i class="fa-solid fa-caret-down"></i></button>
          <ul class="dropdown-menu inail-panel-menu-body inail-panel-menu-body-bt">
            <li class="dropdown-submenu">
              <button class="inail-hm-submenu inail-hm-nav-link-btn">Livello 1 <i class="fa-solid fa-chevron-right"></i></button>
              <ul class="dropdown-menu inail-panel-menu-body">
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
              </ul>
            </li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li class="dropdown-submenu">
              <button class="inail-hm-submenu inail-hm-nav-link-btn">Livello 1 <i class="fa-solid fa-chevron-right"></i></button>
              <ul class="dropdown-menu inail-panel-menu-body">
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
              </ul>
            </li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <button class="dropdown-toggle inail-hm-nav-link-btn">Livello 0 <i class="fa-solid fa-caret-down"></i></button>
          <ul class="dropdown-menu inail-panel-menu-body inail-panel-menu-body-bt">
            <li class="dropdown-submenu">
              <button class="inail-hm-submenu inail-hm-nav-link-btn">Livello 1 <i class="fa-solid fa-chevron-right"></i></button>
              <ul class="dropdown-menu inail-panel-menu-body">
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
              </ul>
            </li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li class="dropdown-submenu">
              <button class="inail-hm-submenu inail-hm-nav-link-btn">Livello 1 <i class="fa-solid fa-chevron-right"></i></button>
              <ul class="dropdown-menu inail-panel-menu-body">
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
              </ul>
            </li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
          </ul>
        </li>

        <li><a href="javascript:void(0)">Livello 0</a></li>

        <li class="dropdown">
          <button class="dropdown-toggle inail-hm-nav-link-btn">Livello 0 <i class="fa-solid fa-caret-down"></i></button>
          <ul class="dropdown-menu inail-panel-menu-body inail-panel-menu-body-bt">
            <li class="dropdown-submenu">
              <button class="inail-hm-submenu inail-hm-nav-link-btn">Livello 1 <i class="fa-solid fa-chevron-right"></i></button>
              <ul class="dropdown-menu inail-panel-menu-body">
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
              </ul>
            </li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li class="dropdown-submenu">
              <button class="inail-hm-submenu inail-hm-nav-link-btn">Livello 1 <i class="fa-solid fa-chevron-right"></i></button>
              <ul class="dropdown-menu inail-panel-menu-body">
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
              </ul>
            </li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <button class="dropdown-toggle inail-hm-nav-link-btn">Livello 0 <i class="fa-solid fa-caret-down"></i></button>
          <ul class="dropdown-menu inail-panel-menu-body inail-panel-menu-body-bt">
            <li class="dropdown-submenu">
              <button class="inail-hm-submenu inail-hm-nav-link-btn">Livello 1 <i class="fa-solid fa-chevron-right"></i></button>
              <ul class="dropdown-menu inail-panel-menu-body">
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
              </ul>
            </li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li class="dropdown-submenu">
              <button class="inail-hm-submenu inail-hm-nav-link-btn">Livello 1 <i class="fa-solid fa-chevron-right"></i></button>
              <ul class="dropdown-menu inail-panel-menu-body">
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
                <li><a href="javascript:void(0)">Livello 2</a></li>
              </ul>
            </li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
            <li><a href="javascript:void(0)">Livello 1</a></li>
          </ul>
        </li>
     
       </ul>
	
       
      
    </div>
	</div>

</nav>
			`}const v="N.D.",u={title:"Componenti/Menu/Menu dell'applicativo/Menu Servizi Online/Menu Orizzontale",tags:["autodocs"],parameters:{docs:{description:{component:`La menu ("briciole di pane") é una tecnica di navigazione utilizzata nelle interfacce utente. Rappresenta il percorso gerarchico di<br/>link per giungere una data pagina all'interno di un sito web.<br/>É un elemento utile per tornare indietro e/o alla pagina iniziale del sito web.`},mdxPage:v,showAccessibility:!0}},decorators:[(e,n)=>o(e,n,3,["https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-webkit.js","https://cdn.inailcloud.it/assets/inail/u.1.0/static/js/main.js","https://cdn.inailcloud.it/assets/inail/u.1.0/static-webkit/js/custom-hr-menu.js"],!0),e=>`${e()}`]},i={name:"Menu orizzontale (1 livello)",render:()=>r()},a={name:"Menu orizzontale (2 livelli)",render:()=>s()},l={name:"Menu orizzontale (3 livelli)",render:()=>t()};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  name: "Menu orizzontale (1 livello)",
  render: () => {
    return createMenu();
  }
}`,...i.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  name: "Menu orizzontale (2 livelli)",
  render: () => {
    return createMenuLevel1();
  }
}`,...a.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
  name: "Menu orizzontale (3 livelli)",
  render: () => {
    return createMenuLevel3();
  }
}`,...l.parameters?.docs?.source}}};const p=["MenuHorizontal","MenuHorizontalLevel1","MenuHorizontalLevel3"];export{i as MenuHorizontal,a as MenuHorizontalLevel1,l as MenuHorizontalLevel3,p as __namedExportsOrder,u as default};
