04. Components: navigation.css

Navigation patterns show location and available views. Pick the right pattern for the context.

Active state

Use is-active for UI state driven by JavaScript. Use aria-current="page" for the current page link in server-rendered HTML. Both apply the same styles.

Nav link variants

Pick one left-slot type per nav: code label, icon, or plain. Do not mix slot types in the same nav. Use .la-nav-link--plain when the left slot should be empty.

Sidebar nav

Built from .la-nav-section groups. Each group has an optional .la-nav-title and a .la-nav stack of links. The left slot can use a code label, icon, or plain layout.

.la-nav-code

Module

IT Active link SA Default link FA Another link

.la-nav-icon

Module

Active link Default link Another link

.la-nav-link--plain

Module

Active link Default link Another link 
<div class="la-nav-section">
  <p class="la-nav-title">Module</p>
  <nav class="la-nav">
    <a class="la-nav-link is-active" href="/dashboard/">
      <span class="la-nav-code">01</span>
      <span class="la-nav-label">Dashboard</span>
    </a>
    <a class="la-nav-link" href="/reports/" aria-current="page">...</a>
  </nav>
</div>

Breadcrumbs

There are two patterns. .la-breadcrumbs is for the topbar and shows parent context inline. .la-breadcrumb-trail is a page-level trail with links and aria-current="page" on the last item.

.la-breadcrumbs : topbar

App / Navigation

.la-breadcrumb-trail : page trail

Home / Module / Current page

Tabs

Use tabs to switch between related views of the same content. Do not use tabs for page-to-page navigation; use the sidebar nav for that.

.la-tabs .la-tab-btn

Pagination

Place pagination below a table or list. The .la-pagination-info label is optional but recommended when the total count matters to the user.

.la-pagination .la-page-link.is-current

Showing 1 to 10 of 42 Prev 1 2 3 Next

Table switcher

Use this to switch between related table views without leaving the page. The .la-table-switcher-sep separator can group related links.

.la-table-switcher

Students Courses Enrolments | Reports