2021-07-02

Making a better selectable nav links

html, css, design, ux

banner

Image by Pexels from Pixabay

When creating nav links, pad anchor tags, not the container elements.

When the container is padded, user need to click on the text exactly.
If anchor tag is padded, users can click near the text, for easier navigation.

better nav links

Demos

Interactive

https://codepen.io/dance2die/pen/QWvjWKq?editors=1100

Source

1<main>2  <header>3    <h2>Must select the link</h2>4    <nav class="nav-bad">5      <ul>6        <li><a href="#">Design</a></li>7        <li><a href="#">Components</a></li>8        <li><a href="#">Develop</a></li>9        <li><a href="#">Resources</a></li>10        <li><a href="#">Blog</a></li>11      </ul>12    </nav>13
14    <h2>Select the box area</h2>15    <nav class="nav-good">16      <ul>17        <li><a href="#">Design</a></li>18        <li><a href="#">Components</a></li>19        <li><a href="#">Develop</a></li>20        <li><a href="#">Resources</a></li>21        <li><a href="#">Blog</a></li>22      </ul>23    </nav>24  </header>25</main>
1.nav-bad {2  background-color: #eee;3  & ul {4    display: flex;5    padding: 20px;6    list-style: none;7    column-gap: 50px;8
9    & a {10      border: 1px solid red;11      text-decoration: none;12      font-weight: bold;13      font-size: 1.5rem;14      letter-spacing: 0.125rem;15      color: deeppink;16
17      &:hover {18        text-decoration: revert;19      }20    }21  }22}23
24.nav-good {25  background-color: #222;26  & ul {27    display: flex;28
29    list-style: none;30    column-gap: 50px;31
32    & a {33      border: 1px solid red;34      display: inline-block;35      padding: 20px;36      text-decoration: none;37      font-weight: bold;38      font-size: 1.5rem;39      letter-spacing: 0.125rem;40      color: deeppink;41
42      &:hover {43        text-decoration: revert;44      }45    }46  }47}