Navigation

The Navigation component provides lightweight semantic navigation links using native HTML elements.

Ignix Lite navigation supports active states, keyboard accessibility, and flexible layouts.

Usage

Preview

Home

About

Contact

Code

<nav>
  <ul>
    <li>
      <a href="#" aria-current="page">
        Home
      </a>
    </li>

    <li>
      <a href="#">
        About
      </a>
    </li>

    <li>
      <a href="#">
        Contact
      </a>
    </li>
  </ul>
</nav>

---

Multiple Links

Preview

Dashboard

Projects

Settings

Profile

Code

<nav>
  <ul>
    <li>
      <a href="#" aria-current="page">
        Dashboard
      </a>
    </li>

    <li>
      <a href="#">
        Projects
      </a>
    </li>

    <li>
      <a href="#">
        Settings
      </a>
    </li>

    <li>
      <a href="#">
        Profile
      </a>
    </li>
  </ul>
</nav>

---

Accessibility

Feature	Description
Semantic HTML	Uses native nav element
Active state	Supports aria-current="page"
Keyboard support	Accessible focus styles

---

Attributes

Attribute	Type	Description
aria-current	'page'	Indicates active navigation link
href	string	Navigation target