Navigation

Legacy

A sliding indicator that shows the selected item of a row or a column of tabs.

ax-navigation marks the selected one of its ax-navigation-item children with a line. When you pick another item, the line stretches toward it and then shrinks onto it.

This package is no longer developed. It does not run on Surface and stays as it is.

Installation

shell 
npm install @ax-design/navigation

and import it:

js 
import { register } from '@ax-design/navigation';
register();

If you don't use a bundler, load the script instead:

html 
<script src="https://unpkg.com/@ax-design/navigation/build/main.js"></script>
<script>AxNavigation.register();</script>
Home Apps Games

Horizontal

The default is a row of items with the line below the selected one. Click an item to move the line.

The color and the width of the line are custom properties. The width is its thickness.

Try it

#FFFFFF
2 px
html 
<ax-navigation>
  <ax-navigation-item>Home</ax-navigation-item>
  <ax-navigation-item>Apps</ax-navigation-item>
  <ax-navigation-item>Games</ax-navigation-item>
</ax-navigation>
css 
ax-navigation {
  --navigation-indicator-color: rgb(255, 255, 255);
  --navigation-indicator-width: 2px;
}
Home Apps Games

Vertical

Add the vertical attribute and the items stack in a column, with the line on the left.

The speed is the time the line takes to move from one item to another.

Try it

600 ms
html 
<ax-navigation vertical>
  <ax-navigation-item>Home</ax-navigation-item>
  <ax-navigation-item>Apps</ax-navigation-item>
  <ax-navigation-item>Games</ax-navigation-item>
</ax-navigation>
css 
ax-navigation {
  --navigation-indicator-speed: 600ms;
}
Home Apps Games

Default item

The first item is selected at the start. Add the default attribute to another item to select that one instead.

Try it

#FFFFFF
html 
<ax-navigation>
  <ax-navigation-item>Home</ax-navigation-item>
  <ax-navigation-item default>Apps</ax-navigation-item>
  <ax-navigation-item>Games</ax-navigation-item>
</ax-navigation>
css 
ax-navigation {
  --navigation-indicator-color: rgb(255, 255, 255);
}
Home Apps Games

Switch event

The ax-navigation element fires a switch event when the line goes from one item to another. The detail has the item before (from) and the item after (to). The event does not bubble.

Try it

2 px
js 
const navigation = document.querySelector('ax-navigation');

navigation.addEventListener('switch', (event) => {
  console.log(event.detail.from.innerText, event.detail.to.innerText);
});

Reference

vertical attribute

boolean, default off

On ax-navigation: a column of items with the line on the left. Without it (or with horizontal) the items are in a row.

default attribute

boolean

On ax-navigation-item: the item that is selected at the start. Without it, the first item.

--navigation-indicator-speed property

<time>, default 600ms

How long the line takes to move to another item.

--navigation-indicator-color property

<color>, default black

The color of the line.

--navigation-indicator-width property

<length>, default 2px

The thickness of the line.

switch event

CustomEvent<{ from, to }>

Fired on ax-navigation when the line goes to another item. Does not bubble, is not cancelable. from and to are the items.