Add support for <nav> tag?

[ethanpil]

The <nav> tag seems like a great candidate for water.css as it is fully supported by all browsers and can be an easy way to create some navigational elements in the page. By default it could use some work, even in water.css!

Is this something you are interested in working on for a future version, or would accept a PR for?

[ethanpil]

As a followup, I have implemented a proof of concept in this JSFiddle.

You can write <nav> as a simple list of links:

<nav>
  <a href="#">Computers</a>
  <a href="#">Tablets</a>
  <a href="#">Phones</a>
  <a href="#">Accessories</a>
</nav>

Or a traditional nested <ul> structure with a dropdown:

<nav>
  <ul>
    <li><a href="#">Computers</a></li>
    <li><a href="#">Tablets</a></li>
    <li>
      <a href="#">Phones</a>
      <ul>
        <li><a href="#">Apple</a></li>
        <li><a href="#">Samsung</a></li>
        <li><a href="#">Google</a></li>
        <li><a href="#">Sony</a></li>
      </ul>
    </li>
    <li><a href="#">Accessories</a></li>
  </ul>
</nav>

Here is the SASS:

$background: #efefef;
$background-alt: #f7f7f7;


nav {

  background: $background;
  padding: 6px;
  text-align: center;
  font-size: 1.15em;

  >a {
    padding: 1rem;
  }

  ul {
    margin: 0;
    padding: 0;

    li {
      display: inline-block;

      &:hover {
        ul {
          display: block;
        }
      }

      a {
        display: block;
        padding: 0 1rem;
        text-decoration: none;
      }

      ul {
        display: none;
        position: absolute;
        z-index: 500;
        padding: .5em 1.15em;
        background: $background;

        li {
          display: block;
          text-align: left;
          float: none;
          padding: .3em .2em;
        }

        a {
          display: inline;
          padding: 0;
          font-size: .9em;
        }
      }
    }
  }
}

[anishanne]

Only problem I see with this is in the readme.md file.

[ethanpil]

@kylejrp are you maintaining the project now and will accept a PR?

[kognise]

Hey - we're likely going to merge this after the 2.0 release, you can keep track of that in #194

Sorry for the slowness ❤️

[Bhavik-Ardeshna]

Hey I am working on this issue !!!!

[kylejrp]

What's the "semantic HTML" way of using <nav>? Probably one or more <ol> or <ul> containing <li><a href="..."></li>, right? I'm not sure if there's weirder valid ways to use it though 🤷‍♂️ The common case is probably fine

The MDN article on <nav> has some nice usage notes to keep in mind:

• It's not necessary for all links to be contained in a
  element.

  is intended only for major block of navigation links; typically the

  element often has a list of links that don't need to be in a

  element.
• A document may have several
  elements, for example, one for site navigation and one for intra-page navigation. aria-labelledby can be used in such case to promote accessibility, see example.

The changeset on the pull request will probably need to be marked as a major change

[jonaskuske]

Yeah, the typical way is

<nav>
  <ul>
    <li><a href /></li>
    ...
  </ul>
</nav>

...potentially with a label for the navigation landmark, and I've also seen the aria-current="page" attribute to specify the currently active link/page. Here's the authoring example from ARIA 1.2: https://www.w3.org/TR/wai-aria-practices-1.2/examples/landmarks/navigation.html

[kylejrp]

I know that breadcrumbs are sometimes done with <nav> to be semantic, for example:

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="../../">
        WAI-ARIA Authoring Practices 1.1
      </a>
    </li>
    <li>
      <a href="../../#aria_ex">
        Design Patterns
      </a>
    </li>
    <li>
      <a href="../../#breadcrumb">
        Breadcrumb Pattern
      </a>
    </li>
    <li>
      <a href="./index.html" aria-current="page">
        Breadcrumb Example
      </a>
    </li>
  </ol>
</nav>

So we would probably need to make sure that a nav implementation would be generic enough to handle both from both a styling perspective and a design perspective.

Nested lists/navs might be out of scope but it would be cool if there was a generic way to support them.

[bumpylumps]

What kind of support are you looking for for the nav?

[developerpra]

assign to me.

[Junaid20001]

can you assign this project to me

[cekvenich2]

So... no Nav?

[prologic]

Hey @kognise What's the status of this feature request? Can you provide an update or roadmap? It would be great to get a few more semantic styles in like this into water.css

[Noah7-cyber]

I am also intrested in helping out