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 tied 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.
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:
npm install
npm startTo build the component for production, run:
npm run buildTo run the unit tests for the components, run:
npm testNeed help? Check out stencil docs here.