@seges/angular-navigation

Navigation menu for angular 1.5.8 using Telerik Kendo UI PanelBar

Usage no npm install needed!

<script type="module">
  import segesAngularNavigation from 'https://cdn.skypack.dev/@seges/angular-navigation';
</script>

README

SEGES Navigation Menu Component for Angular 1.5.8

Requirements

The requirements are external in the sense you have to provide them yourself somehow due to commercial licensing or other factors preventing legal distribution of the package.

*Telerik Kendo UI professional license. *TypeScript =<1.8.10

Using the Navigation component

Simply import the package via TypeScript imports and add the nagivationModule as a module dependency for Angular.

Add <navigation config="your-config-object"></navigation> on the page that holds the menu.

Use the component's INavigationConfig interface to build a configuration object for the component.

Refer to the Kendo UI documentation on how to structure the objects in the items array (http://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar)

In order to refresh the navigation's layout e.g. due to translations, you can overwrite the items object.

Deeplinking

If you need to mark the corresponding url whehn deeplinking to a page, the start-url can be set to the hash of the window.location object.

If you want the menu to fold out the correct top level menu item, you need to handle this in your project configuration by setting the 'expanded' property of the navigation items.

Using the Navigation Toggle component

Add <navigation-toggle config="your-toggle-config-object"></navigation-toggle> where you want the toggle to be

The toggle is only shown on tablet and phone sized screens as its purpose is to show the menu when the screen has limited space.

Use the NavigationToggleConfig interface to configure the navigation toggle.