Menu icon Foundation
Is this nav section correct?

Hi all,

Just migrating to foundation5 and am trying to get to grips with the new nav options (off canvas).

I've put together a snippet of some test html that seems to work ok. Is this the correct way I should be using the nav or do you do it differently?

Thanks

<nav class="top-bar hide-for-small" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
  </ul>

  <section class="top-bar-section hide-for-small">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Nav Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button with Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>


<div class="off-canvas-wrap">
  <div class="inner-wrap">

    <a class="left-off-canvas-toggle show-for-small" >Menu</a> 

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
        <ul>
          <li><a href="#">Item 1</a></li>
        ...
        </ul>
    </aside>

    <!-- main content goes here -->
    
  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div>
</div>
            

         

navsectionnavbartop baroffcanvas

Hi all,

Just migrating to foundation5 and am trying to get to grips with the new nav options (off canvas).

I've put together a snippet of some test html that seems to work ok. Is this the correct way I should be using the nav or do you do it differently?

Thanks

<nav class="top-bar hide-for-small" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
  </ul>

  <section class="top-bar-section hide-for-small">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Nav Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button with Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>


<div class="off-canvas-wrap">
  <div class="inner-wrap">

    <a class="left-off-canvas-toggle show-for-small" >Menu</a> 

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
        <ul>
          <li><a href="#">Item 1</a></li>
        ...
        </ul>
    </aside>

    <!-- main content goes here -->
    
  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div>
</div>
            

         
Karl Ward over 5 years ago

Does it work? Looking through the code, I can't see anything wrong, and the hide-for-small show-for-small combo should be an acceptable solution.

I would perhaps considering adding the top-bar inside the .inner-wrap element, just because the entire page should be placed there. In your case it will likely not make any difference though ...