Nav Item

One destination in a side or rail navigation: the sections of a product, or the parts of a record.

Sidebar

Links in a native nav landmark and a List, so the navigation is announced as a landmark and a list of its items. The current page takes the selected surface, accent text, without changing label weight.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-list/ui-list.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-nav-item/ui-nav-item.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-icon/ui-icon.html"
>

<nav
  aria-label="Main"
>
  <ui-list>
    <li>
      <ui-nav-item
        as="a"
        href="#dashboard"
      >
        <ui-icon
          slot="leading"
          name="layout-dashboard"
        ></ui-icon>
        Dashboard
      </ui-nav-item>
    </li>
    <li>
      <ui-nav-item
        as="a"
        href="#shipments"
        current="true"
      >
        <ui-icon
          slot="leading"
          name="truck"
        ></ui-icon>
        Shipments
      </ui-nav-item>
    </li>
    <li>
      <ui-nav-item
        as="a"
        href="#invoices"
      >
        <ui-icon
          slot="leading"
          name="receipt"
        ></ui-icon>
        Invoices
      </ui-nav-item>
    </li>
    <li>
      <ui-nav-item
        as="a"
        href="#contacts"
      >
        <ui-icon
          slot="leading"
          name="book-user"
        ></ui-icon>
        Contacts
      </ui-nav-item>
    </li>
    <li>
      <ui-nav-item
        as="a"
        href="#settings"
      >
        <ui-icon
          slot="leading"
          name="settings"
        ></ui-icon>
        Settings
      </ui-nav-item>
    </li>
  </ui-list>
</nav>

<script setup>
  import { UiIcon, UiList, UiNavItem } from "@threadlabs/looma";
</script>

<template>
  <nav
    aria-label="Main"
  >
    <UiList>
      <li>
        <UiNavItem
          as="a"
          href="#dashboard"
        ><template #leading>
            <UiIcon
              name="layout-dashboard"
            />
          </template>Dashboard</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#shipments"
          current="true"
        ><template #leading>
            <UiIcon
              name="truck"
            />
          </template>Shipments</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#invoices"
        ><template #leading>
            <UiIcon
              name="receipt"
            />
          </template>Invoices</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#contacts"
        ><template #leading>
            <UiIcon
              name="book-user"
            />
          </template>Contacts</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#settings"
        ><template #leading>
            <UiIcon
              name="settings"
            />
          </template>Settings</UiNavItem>
      </li>
    </UiList>
  </nav>
</template>

import { UiIcon, UiList, UiNavItem } from "@threadlabs/looma";

export default function Example() {
  return <nav
    aria-label="Main"
  >
    <UiList>
      <li>
        <UiNavItem
          as="a"
          href="#dashboard"
          slots={{
            leading: <UiIcon
              name="layout-dashboard"
            />,
          }}
        >Dashboard</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#shipments"
          current="true"
          slots={{
            leading: <UiIcon
              name="truck"
            />,
          }}
        >Shipments</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#invoices"
          slots={{
            leading: <UiIcon
              name="receipt"
            />,
          }}
        >Invoices</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#contacts"
          slots={{
            leading: <UiIcon
              name="book-user"
            />,
          }}
        >Contacts</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#settings"
          slots={{
            leading: <UiIcon
              name="settings"
            />,
          }}
        >Settings</UiNavItem>
      </li>
    </UiList>
  </nav>;
}

/** @jsxImportSource preact */
import { UiIcon, UiList, UiNavItem } from "@threadlabs/looma";

export default function Example() {
  return <nav
    aria-label="Main"
  >
    <UiList>
      <li>
        <UiNavItem
          as="a"
          href="#dashboard"
          slots={{
            leading: <UiIcon
              name="layout-dashboard"
            />,
          }}
        >Dashboard</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#shipments"
          current="true"
          slots={{
            leading: <UiIcon
              name="truck"
            />,
          }}
        >Shipments</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#invoices"
          slots={{
            leading: <UiIcon
              name="receipt"
            />,
          }}
        >Invoices</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#contacts"
          slots={{
            leading: <UiIcon
              name="book-user"
            />,
          }}
        >Contacts</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#settings"
          slots={{
            leading: <UiIcon
              name="settings"
            />,
          }}
        >Settings</UiNavItem>
      </li>
    </UiList>
  </nav>;
}

<script>
  import { UiIcon, UiList, UiNavItem } from "@threadlabs/looma";
</script>

{#snippet leading()}
  <UiIcon
    name="layout-dashboard"
  />
{/snippet}

{#snippet navItemLeading()}
  <UiIcon
    name="truck"
  />
{/snippet}

{#snippet navItemLeading2()}
  <UiIcon
    name="receipt"
  />
{/snippet}

{#snippet navItemLeading3()}
  <UiIcon
    name="book-user"
  />
{/snippet}

{#snippet navItemLeading4()}
  <UiIcon
    name="settings"
  />
{/snippet}

<nav
  aria-label="Main"
>
  <UiList>
    <li>
      <UiNavItem
        as="a"
        href="#dashboard"
        slots={{ leading }}
      >Dashboard</UiNavItem>
    </li>
    <li>
      <UiNavItem
        as="a"
        href="#shipments"
        current="true"
        slots={{ leading: navItemLeading }}
      >Shipments</UiNavItem>
    </li>
    <li>
      <UiNavItem
        as="a"
        href="#invoices"
        slots={{ leading: navItemLeading2 }}
      >Invoices</UiNavItem>
    </li>
    <li>
      <UiNavItem
        as="a"
        href="#contacts"
        slots={{ leading: navItemLeading3 }}
      >Contacts</UiNavItem>
    </li>
    <li>
      <UiNavItem
        as="a"
        href="#settings"
        slots={{ leading: navItemLeading4 }}
      >Settings</UiNavItem>
    </li>
  </UiList>
</nav>

import { Component } from "@angular/core";
import { UiIcon, UiList, UiNavItem } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiList, UiNavItem, UiIcon],
  template: `
    <nav
      aria-label="Main"
    >
      <ng-template
        ui-list
      >
        <li>
          <ng-template #leading>
            <span
              ui-icon
              name="layout-dashboard"
            ></span>
          </ng-template>
          <ng-template
            ui-nav-item
            [as]="'a'"
            [href]="'#dashboard'"
            [slots]="{ leading: leading }"
          >Dashboard</ng-template>
        </li>
        <li>
          <ng-template #navItemLeading>
            <span
              ui-icon
              name="truck"
            ></span>
          </ng-template>
          <ng-template
            ui-nav-item
            [as]="'a'"
            [href]="'#shipments'"
            [current]="'true'"
            [slots]="{ leading: navItemLeading }"
          >Shipments</ng-template>
        </li>
        <li>
          <ng-template #navItemLeading2>
            <span
              ui-icon
              name="receipt"
            ></span>
          </ng-template>
          <ng-template
            ui-nav-item
            [as]="'a'"
            [href]="'#invoices'"
            [slots]="{ leading: navItemLeading2 }"
          >Invoices</ng-template>
        </li>
        <li>
          <ng-template #navItemLeading3>
            <span
              ui-icon
              name="book-user"
            ></span>
          </ng-template>
          <ng-template
            ui-nav-item
            [as]="'a'"
            [href]="'#contacts'"
            [slots]="{ leading: navItemLeading3 }"
          >Contacts</ng-template>
        </li>
        <li>
          <ng-template #navItemLeading4>
            <span
              ui-icon
              name="settings"
            ></span>
          </ng-template>
          <ng-template
            ui-nav-item
            [as]="'a'"
            [href]="'#settings'"
            [slots]="{ leading: navItemLeading4 }"
          >Settings</ng-template>
        </li>
      </ng-template>
    </nav>
  `,
})
export default class Example {}

Description

A description is one more line under the label, such as the record a section belongs to. Without as="a" and href the item is a button, for switching views inside the app. Label and description each end in an ellipsis.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-list/ui-list.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-nav-item/ui-nav-item.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-icon/ui-icon.html"
>

<nav
  aria-label="Order outline"
  style="max-inline-size: 16rem"
>
  <ui-list>
    <li>
      <ui-nav-item
        current="true"
      >
        <ui-icon
          slot="leading"
          name="users"
        ></ui-icon>
        Customer
        <span
          slot="description"
        >Pine Street Motors</span>
      </ui-nav-item>
    </li>
    <li>
      <ui-nav-item>
        <ui-icon
          slot="leading"
          name="credit-card"
        ></ui-icon>
        Payment
        <span
          slot="description"
        >Card ending 4242, charged on delivery</span>
      </ui-nav-item>
    </li>
    <li>
      <ui-nav-item>
        <ui-icon
          slot="leading"
          name="calculator"
        ></ui-icon>
        Totals
        <span
          slot="description"
        >Three lines</span>
      </ui-nav-item>
    </li>
  </ui-list>
</nav>

<script setup>
  import { UiIcon, UiList, UiNavItem } from "@threadlabs/looma";
</script>

<template>
  <nav
    aria-label="Order outline"
    style="max-inline-size: 16rem"
  >
    <UiList>
      <li>
        <UiNavItem
          current="true"
        > <template #leading>
            <UiIcon
              name="users"
            />
          </template>Customer <template #description>
            <span>Pine Street Motors</span>
          </template> </UiNavItem>
      </li>
      <li>
        <UiNavItem> <template #leading>
            <UiIcon
              name="credit-card"
            />
          </template>Payment <template #description>
            <span>Card ending 4242, charged on delivery</span>
          </template> </UiNavItem>
      </li>
      <li>
        <UiNavItem> <template #leading>
            <UiIcon
              name="calculator"
            />
          </template>Totals <template #description>
            <span>Three lines</span>
          </template> </UiNavItem>
      </li>
    </UiList>
  </nav>
</template>

import { UiIcon, UiList, UiNavItem } from "@threadlabs/looma";

export default function Example() {
  return <nav
    aria-label="Order outline"
    style={{"maxInlineSize":"16rem"}}
  >
    <UiList>
      <li>
        <UiNavItem
          current="true"
          slots={{
            leading: <UiIcon
              name="users"
            />,
            description: <span>Pine Street Motors</span>,
          }}
        >{" "}{"Customer "}{" "}</UiNavItem>
      </li>
      <li>
        <UiNavItem
          slots={{
            leading: <UiIcon
              name="credit-card"
            />,
            description: <span>Card ending 4242, charged on delivery</span>,
          }}
        >{" "}{"Payment "}{" "}</UiNavItem>
      </li>
      <li>
        <UiNavItem
          slots={{
            leading: <UiIcon
              name="calculator"
            />,
            description: <span>Three lines</span>,
          }}
        >{" "}{"Totals "}{" "}</UiNavItem>
      </li>
    </UiList>
  </nav>;
}

/** @jsxImportSource preact */
import { UiIcon, UiList, UiNavItem } from "@threadlabs/looma";

export default function Example() {
  return <nav
    aria-label="Order outline"
    style={{"maxInlineSize":"16rem"}}
  >
    <UiList>
      <li>
        <UiNavItem
          current="true"
          slots={{
            leading: <UiIcon
              name="users"
            />,
            description: <span>Pine Street Motors</span>,
          }}
        >{" "}{"Customer "}{" "}</UiNavItem>
      </li>
      <li>
        <UiNavItem
          slots={{
            leading: <UiIcon
              name="credit-card"
            />,
            description: <span>Card ending 4242, charged on delivery</span>,
          }}
        >{" "}{"Payment "}{" "}</UiNavItem>
      </li>
      <li>
        <UiNavItem
          slots={{
            leading: <UiIcon
              name="calculator"
            />,
            description: <span>Three lines</span>,
          }}
        >{" "}{"Totals "}{" "}</UiNavItem>
      </li>
    </UiList>
  </nav>;
}

<script>
  import { UiIcon, UiList, UiNavItem } from "@threadlabs/looma";
</script>

{#snippet leading()}
  <UiIcon
    name="users"
  />
{/snippet}

{#snippet description()}
  <span>Pine Street Motors</span>
{/snippet}

{#snippet navItemLeading()}
  <UiIcon
    name="credit-card"
  />
{/snippet}

{#snippet navItemDescription()}
  <span>Card ending 4242, charged on delivery</span>
{/snippet}

{#snippet navItemLeading2()}
  <UiIcon
    name="calculator"
  />
{/snippet}

{#snippet navItemDescription2()}
  <span>Three lines</span>
{/snippet}

<nav
  aria-label="Order outline"
  style="max-inline-size: 16rem"
>
  <UiList>
    <li>
      <UiNavItem
        current="true"
        slots={{ leading, description }}
      > Customer  </UiNavItem>
    </li>
    <li>
      <UiNavItem
        slots={{ leading: navItemLeading, description: navItemDescription }}
      > Payment  </UiNavItem>
    </li>
    <li>
      <UiNavItem
        slots={{ leading: navItemLeading2, description: navItemDescription2 }}
      > Totals  </UiNavItem>
    </li>
  </UiList>
</nav>

import { Component } from "@angular/core";
import { UiIcon, UiList, UiNavItem } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiList, UiNavItem, UiIcon],
  template: `
    <nav
      aria-label="Order outline"
      style="max-inline-size: 16rem"
    >
      <ng-template
        ui-list
      >
        <li>
          <ng-template #leading>
            <span
              ui-icon
              name="users"
            ></span>
          </ng-template>
          <ng-template #description>
            <span>Pine Street Motors</span>
          </ng-template>
          <ng-template
            ui-nav-item
            [current]="'true'"
            [slots]="{ leading: leading, description: description }"
          > Customer  </ng-template>
        </li>
        <li>
          <ng-template #navItemLeading>
            <span
              ui-icon
              name="credit-card"
            ></span>
          </ng-template>
          <ng-template #navItemDescription>
            <span>Card ending 4242, charged on delivery</span>
          </ng-template>
          <ng-template
            ui-nav-item
            [slots]="{ leading: navItemLeading, description: navItemDescription }"
          > Payment  </ng-template>
        </li>
        <li>
          <ng-template #navItemLeading2>
            <span
              ui-icon
              name="calculator"
            ></span>
          </ng-template>
          <ng-template #navItemDescription2>
            <span>Three lines</span>
          </ng-template>
          <ng-template
            ui-nav-item
            [slots]="{ leading: navItemLeading2, description: navItemDescription2 }"
          > Totals  </ng-template>
        </li>
      </ng-template>
    </nav>
  `,
})
export default class Example {}

Current step

current="step" marks the step of a process you are on, and current="location" your place in a set; current="true" means the page. Each sets the matching aria-current.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-list/ui-list.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-nav-item/ui-nav-item.html"
>

<nav
  aria-label="Setup steps"
>
  <ui-list>
    <li>
      <ui-nav-item
        as="a"
        href="#account"
      >1. Account</ui-nav-item>
    </li>
    <li>
      <ui-nav-item
        as="a"
        href="#team"
        current="step"
      >2. Team</ui-nav-item>
    </li>
    <li>
      <ui-nav-item
        as="a"
        href="#billing"
      >3. Billing</ui-nav-item>
    </li>
  </ui-list>
</nav>

<script setup>
  import { UiList, UiNavItem } from "@threadlabs/looma";
</script>

<template>
  <nav
    aria-label="Setup steps"
  >
    <UiList>
      <li>
        <UiNavItem
          as="a"
          href="#account"
        >1. Account</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#team"
          current="step"
        >2. Team</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#billing"
        >3. Billing</UiNavItem>
      </li>
    </UiList>
  </nav>
</template>

import { UiList, UiNavItem } from "@threadlabs/looma";

export default function Example() {
  return <nav
    aria-label="Setup steps"
  >
    <UiList>
      <li>
        <UiNavItem
          as="a"
          href="#account"
        >1. Account</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#team"
          current="step"
        >2. Team</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#billing"
        >3. Billing</UiNavItem>
      </li>
    </UiList>
  </nav>;
}

/** @jsxImportSource preact */
import { UiList, UiNavItem } from "@threadlabs/looma";

export default function Example() {
  return <nav
    aria-label="Setup steps"
  >
    <UiList>
      <li>
        <UiNavItem
          as="a"
          href="#account"
        >1. Account</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#team"
          current="step"
        >2. Team</UiNavItem>
      </li>
      <li>
        <UiNavItem
          as="a"
          href="#billing"
        >3. Billing</UiNavItem>
      </li>
    </UiList>
  </nav>;
}

<script>
  import { UiList, UiNavItem } from "@threadlabs/looma";
</script>

<nav
  aria-label="Setup steps"
>
  <UiList>
    <li>
      <UiNavItem
        as="a"
        href="#account"
      >1. Account</UiNavItem>
    </li>
    <li>
      <UiNavItem
        as="a"
        href="#team"
        current="step"
      >2. Team</UiNavItem>
    </li>
    <li>
      <UiNavItem
        as="a"
        href="#billing"
      >3. Billing</UiNavItem>
    </li>
  </UiList>
</nav>

import { Component } from "@angular/core";
import { UiList, UiNavItem } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiList, UiNavItem],
  template: `
    <nav
      aria-label="Setup steps"
    >
      <ng-template
        ui-list
      >
        <li>
          <ng-template
            ui-nav-item
            [as]="'a'"
            [href]="'#account'"
          >1. Account</ng-template>
        </li>
        <li>
          <ng-template
            ui-nav-item
            [as]="'a'"
            [href]="'#team'"
            [current]="'step'"
          >2. Team</ng-template>
        </li>
        <li>
          <ng-template
            ui-nav-item
            [as]="'a'"
            [href]="'#billing'"
          >3. Billing</ng-template>
        </li>
      </ng-template>
    </nav>
  `,
})
export default class Example {}

Surface and line selection

Surface selection uses shared corners without a stripe. Line selection uses a square, continuous start edge. Both keep the resting label weight.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-stack/ui-stack.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-nav-item/ui-nav-item.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-icon/ui-icon.html"
>

<ui-stack
  gap="l"
>
  <nav
    aria-label="Surface navigation"
  >
    <ui-nav-item
      as="a"
      href="#overview"
      current="page"
      density="compact"
    >
      <ui-icon
        slot="leading"
        name="compass"
      ></ui-icon>
      Overview
    </ui-nav-item>
    <ui-nav-item
      as="a"
      href="#activity"
      density="compact"
    >
      <ui-icon
        slot="leading"
        name="history"
      ></ui-icon>
      Activity
    </ui-nav-item>
  </nav>
  <nav
    aria-label="Line navigation"
  >
    <ui-nav-item
      as="a"
      href="#introduction"
      current="location"
      variant="line"
      density="compact"
    >Introduction</ui-nav-item>
    <ui-nav-item
      as="a"
      href="#details"
      variant="line"
      density="compact"
    >Details</ui-nav-item>
  </nav>
</ui-stack>

<script setup>
  import { UiIcon, UiNavItem, UiStack } from "@threadlabs/looma";
</script>

<template>
  <UiStack
    gap="l"
  >
    <nav
      aria-label="Surface navigation"
    >
      <UiNavItem
        as="a"
        href="#overview"
        current="page"
        density="compact"
      ><template #leading>
          <UiIcon
            name="compass"
          />
        </template>Overview</UiNavItem>
      <UiNavItem
        as="a"
        href="#activity"
        density="compact"
      ><template #leading>
          <UiIcon
            name="history"
          />
        </template>Activity</UiNavItem>
    </nav>
    <nav
      aria-label="Line navigation"
    >
      <UiNavItem
        as="a"
        href="#introduction"
        current="location"
        variant="line"
        density="compact"
      >Introduction</UiNavItem>
      <UiNavItem
        as="a"
        href="#details"
        variant="line"
        density="compact"
      >Details</UiNavItem>
    </nav>
  </UiStack>
</template>

import { UiIcon, UiNavItem, UiStack } from "@threadlabs/looma";

export default function Example() {
  return <UiStack
    gap="l"
  >
    <nav
      aria-label="Surface navigation"
    >
      <UiNavItem
        as="a"
        href="#overview"
        current="page"
        density="compact"
        slots={{
          leading: <UiIcon
            name="compass"
          />,
        }}
      >Overview</UiNavItem>
      <UiNavItem
        as="a"
        href="#activity"
        density="compact"
        slots={{
          leading: <UiIcon
            name="history"
          />,
        }}
      >Activity</UiNavItem>
    </nav>
    <nav
      aria-label="Line navigation"
    >
      <UiNavItem
        as="a"
        href="#introduction"
        current="location"
        variant="line"
        density="compact"
      >Introduction</UiNavItem>
      <UiNavItem
        as="a"
        href="#details"
        variant="line"
        density="compact"
      >Details</UiNavItem>
    </nav>
  </UiStack>;
}

/** @jsxImportSource preact */
import { UiIcon, UiNavItem, UiStack } from "@threadlabs/looma";

export default function Example() {
  return <UiStack
    gap="l"
  >
    <nav
      aria-label="Surface navigation"
    >
      <UiNavItem
        as="a"
        href="#overview"
        current="page"
        density="compact"
        slots={{
          leading: <UiIcon
            name="compass"
          />,
        }}
      >Overview</UiNavItem>
      <UiNavItem
        as="a"
        href="#activity"
        density="compact"
        slots={{
          leading: <UiIcon
            name="history"
          />,
        }}
      >Activity</UiNavItem>
    </nav>
    <nav
      aria-label="Line navigation"
    >
      <UiNavItem
        as="a"
        href="#introduction"
        current="location"
        variant="line"
        density="compact"
      >Introduction</UiNavItem>
      <UiNavItem
        as="a"
        href="#details"
        variant="line"
        density="compact"
      >Details</UiNavItem>
    </nav>
  </UiStack>;
}

<script>
  import { UiIcon, UiNavItem, UiStack } from "@threadlabs/looma";
</script>

{#snippet leading()}
  <UiIcon
    name="compass"
  />
{/snippet}

{#snippet navItemLeading()}
  <UiIcon
    name="history"
  />
{/snippet}

<UiStack
  gap="l"
>
  <nav
    aria-label="Surface navigation"
  >
    <UiNavItem
      as="a"
      href="#overview"
      current="page"
      density="compact"
      slots={{ leading }}
    >Overview</UiNavItem>
    <UiNavItem
      as="a"
      href="#activity"
      density="compact"
      slots={{ leading: navItemLeading }}
    >Activity</UiNavItem>
  </nav>
  <nav
    aria-label="Line navigation"
  >
    <UiNavItem
      as="a"
      href="#introduction"
      current="location"
      variant="line"
      density="compact"
    >Introduction</UiNavItem>
    <UiNavItem
      as="a"
      href="#details"
      variant="line"
      density="compact"
    >Details</UiNavItem>
  </nav>
</UiStack>

import { Component } from "@angular/core";
import { UiIcon, UiNavItem, UiStack } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiStack, UiNavItem, UiIcon],
  template: `
    <div
      ui-stack
      [gap]="'l'"
    >
      <nav
        aria-label="Surface navigation"
      >
        <ng-template #leading>
          <span
            ui-icon
            name="compass"
          ></span>
        </ng-template>
        <ng-template
          ui-nav-item
          [as]="'a'"
          [href]="'#overview'"
          [current]="'page'"
          [density]="'compact'"
          [slots]="{ leading: leading }"
        >Overview</ng-template>
        <ng-template #navItemLeading>
          <span
            ui-icon
            name="history"
          ></span>
        </ng-template>
        <ng-template
          ui-nav-item
          [as]="'a'"
          [href]="'#activity'"
          [density]="'compact'"
          [slots]="{ leading: navItemLeading }"
        >Activity</ng-template>
      </nav>
      <nav
        aria-label="Line navigation"
      >
        <ng-template
          ui-nav-item
          [as]="'a'"
          [href]="'#introduction'"
          [current]="'location'"
          [variant]="'line'"
          [density]="'compact'"
        >Introduction</ng-template>
        <ng-template
          ui-nav-item
          [as]="'a'"
          [href]="'#details'"
          [variant]="'line'"
          [density]="'compact'"
        >Details</ng-template>
      </nav>
    </div>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: button

Attributes

Name	Description	Property	Type	Default	Allowed values
`as`	The native element the item renders: a button, or a link (a) that navigates to href.	`as`	`keyword`	`button`	`button, a`
`current`	Marks the item as where you are: it takes the selected surface, the selected text, and the chosen surface or line treatment, and states aria-current, which assistive technology announces. "true" means the current page (aria-current="page"); "step" marks the current step of a process, and "location" the current place in a set, such as a section of a record. Set it on one item at a time.	`current`	`keyword`	`false`	`true, false, page, step, location`
`density`	Compact uses smaller type and row spacing to sit alongside a compact tree; comfortable keeps the regular navigation row.	`density`	`keyword`	`comfortable`	`comfortable, compact`
`href`	The link's destination. Pair it with as="a" so the item renders as a real link: a router, a modified click, and "open in new tab" all work. Without it the item is a button, for switching views inside the app.	`href`	`string`	`—`	`—`
`rel`	The link's relationship to its destination, as on a native link. Only meaningful with as="a".	`rel`	`string`	`—`	`—`
`target`	Where a link opens, as on a native link. Only meaningful with as="a".	`target`	`string`	`—`	`—`
`variant`	surface marks the current row with a quiet filled surface and shared corners. line uses square corners and a continuous logical start edge. Both retain the resting label weight and expose aria-current.	`variant`	`keyword`	`surface`	`surface, line`

Framework props

Name	Type	Default	Allowed values
`as`	`"button" \| "a"`	`button`	`button, a`
`current`	`"true" \| "false" \| "page" \| "step" \| "location"`	`false`	`true, false, page, step, location`
`density`	`"comfortable" \| "compact"`	`comfortable`	`comfortable, compact`
`href`	`string`	`—`	`—`
`rel`	`string`	`—`	`—`
`target`	`string`	`—`	`—`
`variant`	`"surface" \| "line"`	`surface`	`surface, line`

Events

No events.

Slots

Name	Purpose
`leading`	Named content for the leading region.
`default`	Default child content.
`description`	Named content for the description region.
`trailing`	Named content for the trailing region.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

Token	Declared values	Fallback
`--ui-nav-item-current-surface`	`—`	`var(--_ui-selection-context-surface, var(--ui-selection-surface))`
`--ui-nav-item-indicator-color`	`—`	`var(--ui-accent)`
`--ui-nav-item-indicator-width`	`—`	`var(--ui-accent-line-width)`
`--ui-nav-item-inline-size`	`—`	`100%`

Shared tokens

Token	Fallback
`--ui-accent`	`—`
`--ui-accent-line-width`	`—`
`--ui-border-width`	`—`
`--ui-control-min-block-size`	`—`
`--ui-focus-ring`	`—`
`--ui-focus-width`	`—`
`--ui-font-normal`	`—`
`--ui-font-size-md`	`—`
`--ui-font-size-sm`	`—`
`--ui-line-height-tight`	`—`
`--ui-motion-ease`	`—`
`--ui-motion-fast`	`—`
`--ui-nav-compact-min-block-size`	`—`
`--ui-nav-compact-padding-block`	`—`
`--ui-nav-compact-padding-inline`	`—`
`--ui-nav-gap`	`—`
`--ui-nav-hover-surface`	`—`
`--ui-nav-icon-size`	`—`
`--ui-nav-min-block-size`	`—`
`--ui-nav-padding-block`	`—`
`--ui-nav-padding-inline`	`—`
`--ui-selection-border`	`—`
`--ui-selection-radius`	`—`
`--ui-selection-surface`	`—`
`--ui-selection-text`	`—`
`--ui-space-0-5`	`2px`
`--ui-text-muted`	`—`
`--ui-text-primary`	`—`
`--ui-text-secondary`	`—`