TypeScript icon, indicating that this package has built-in type declarations

4.3.3 • Public • Published


This component is being deprecated. The code base has been moved to amf-components module. This module will be archived when PR 1 is merged.

Published on NPM

Tests and publishing

A navigation for an API spec generated from AMF ld+json model.

Version compatibility

This version only works with AMF model version 2 (AMF parser >= 4.0.0). For compatibility with previous model version use 3.x.x version of the component.



npm install @api-components/api-navigation --save

The element works with AMF json/ld model. When the model is set it computes list of documentation nodes, types, endpoints, methods and security schemas. As a result user can select any of the items in the UI and the application is informed about user choice via custom event.

The selection is a selected API shape @id. The application is responsible for computing the model selected by the user.

Note, this element does not contain polyfills for Array platform features.

Passive navigation

Passive navigation means that a navigation event occurred but it wasn't invoked by intentional user interaction. For example api-endpoint-documentation component renders list of documentations for HTTP methods. While scrolling through the list navigation context changes (user reads documentation of a method) but the navigation never was caused by user intentional interaction. This event, annotated with passive: true property in the detail object, prohibits other element from taking a navigation action but some may reflect the change in the UI.

In an html file

    <script type="module">
      import '@api-components/api-navigation/api-navigation.js';
    <api-navigation amf="..."></api-navigation>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@api-components/api-navigation/api-navigation.js';

class SampleElement extends LitElement {
  render() {
    return html`

  _navigationHandler(e) {
    const { selected, type, endpointId, passive } = e.detail;
customElements.define('sample-element', SampleElement);


git clone https://github.com/advanced-rest-client/api-navigation
cd api-navigation
npm install

Running the demo locally

npm start

Running the tests

npm test

Package Sidebar


npm i @api-components/api-navigation

Weekly Downloads






Unpacked Size

201 kB

Total Files


Last publish


  • jarrodek
  • twoplustwoone
  • lbauret
  • carowright