import{a as m}from"./Utilities-CQhZFhp5.js";function b(){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 h(){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 f(){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 L="N.D.",w={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:L,showAccessibility:!0}},decorators:[(e,n)=>m(e,n,3,["static-webkit/js/custom-webkit.js","static/js/main.js","assets/js/custom-hr-menu.js"],!0),e=>`${e()}`]},i={name:"Menu orizzontale (1 livello)",render:()=>b()},a={name:"Menu orizzontale (2 livelli)",render:()=>h()},l={name:"Menu orizzontale (3 livelli)",render:()=>f()};var o,r,s;i.parameters={...i.parameters,docs:{...(o=i.parameters)==null?void 0:o.docs,source:{originalSource:`{
  name: "Menu orizzontale (1 livello)",
  render: () => {
    return createMenu();
  }
}`,...(s=(r=i.parameters)==null?void 0:r.docs)==null?void 0:s.source}}};var t,v,d;a.parameters={...a.parameters,docs:{...(t=a.parameters)==null?void 0:t.docs,source:{originalSource:`{
  name: "Menu orizzontale (2 livelli)",
  render: () => {
    return createMenuLevel1();
  }
}`,...(d=(v=a.parameters)==null?void 0:v.docs)==null?void 0:d.source}}};var c,u,p;l.parameters={...l.parameters,docs:{...(c=l.parameters)==null?void 0:c.docs,source:{originalSource:`{
  name: "Menu orizzontale (3 livelli)",
  render: () => {
    return createMenuLevel3();
  }
}`,...(p=(u=l.parameters)==null?void 0:u.docs)==null?void 0:p.source}}};const g=["MenuHorizontal","MenuHorizontalLevel1","MenuHorizontalLevel3"];export{i as MenuHorizontal,a as MenuHorizontalLevel1,l as MenuHorizontalLevel3,g as __namedExportsOrder,w as default};
