Navigation Shell

When composing web components into an existing app, navigating between decoupled components or between components and existing parts of the existing app can become a problem. If the component deals with navigating by itself it would be tight to the composing apps navigation structure and therefore not reusable by other apps with a different navigation structure.

The navigation shell tries to solve this problem by delegating the configuration of routes and the execution of the actual navigation operation to the composing app. The only contract between the components and the composing app is a unique key (the routeKey) and the data (routeData) needed to perform a navigation. The routeKey identifies a single route configuration and is used to refer to that route from within a component.

Using this component

The main building block is the <kiwi-navigation-shell />. It holds the route configuration. The <kiwi-shell-link /> is used to turn the configuration identified by a routeKey into an actual link.

See:

• kiwi-navigation-shell
• kiwi-shell-link

Development

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out stencil docs here.