Nominally Patriotic Meathead

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

    1.1.6 • Public • Published

    Panel Navigator

    This Angular Module (Component) allows you to have dynamic navigation with icons and status type and navigation controlloer.


    npm install panel-navigation-scroller


    Import the module into your project under imports

    imports: [


    To use in your component, use the following tag for a basic setup



    The following Inputs are available

    Input Type Defaut Description
    title STRING NULL title for navigation section
    description STRING NULL description below title area for navigation
    data Object or Observable [] data for items
    navigation BOOLEAN FALSE navigation controller at top of navigation
    navigationTitle STRING NULL navigation controller title
    navigationColor STRING NULL navigation controller background color
    navigationTextColor STRING NULL navigation controller text color
    navigationRedirect STRING NULL back button on navigation controller will appear and redirect to this route
    bindSelectionToTitle BOOLEAN NULL the selected item will be reflected in the navigation controller
    stateTypes OBJECTS[] NULL states for items - appears on right of menu items
    lineAbove BOOLEAN FALSE add line above navigation list
    lineBelow BOOLEAN FALSE add line below navigation list
    displayIcons BOOLEAN FALSE display icons from data to line items on left
    displayStates BOOLEAN FALSE display state icons from data to line items on left
    enableScrolling BOOLEAN FALSE add line below navigation list

    Data Structure

    Object or Observable, this is the data strtucture object that defines each list item. All, Some none of the properties may be provided for eah list item. You do need at least a name property to display something in the list.

      data: MenuItem[] = [
        { name: 'Vendor Onboarding', disabled: false, icon: 'person', iconColor: 'purple', color: 'green', state: 1, ref: 'sec2'},
        { name: 'Required Information', disabled: false, state: 0 },
        { name: 'Private Details', disabled: false, state: -1 },
        { name: 'Negotiated Terms', disabled: false, state: 2 },


    Input Type Defaut Description
    name STRING NULL list item text
    disabled STRING NULL disable list item
    icon STRING NULL icon to use (mat icons)
    iconColor STRING NULL icon (left on list item color) color
    color STRING NULL color of the text
    state STRING NULL the state ID (State Types) that is assigned to this list item
    ref STRING NULL this is the div reference ID for the target to be scrolled to


    Input Type Defaut Description
    selectedItem MenuItem NULL menu item object

    State Type Structure

    This is the different state types (icon on the right of list) that is provided when a state of a menu item has changed Provided all the types that are assigned to the data structure. if no type is provided, nothing will be rendered.

    stateTypes: StateType[] = [
      {name: 'testing', icon: '', value: 0, color: ''},
      {name: 'approved', icon: 'check', value: 1, color: 'purple'},
      {name: 'declined', icon: 'warning', value: -1, color: 'red'},
      {name: 'warning', icon: 'refresh', value: 2, color: 'orange'},


    Input Type Defaut Description
    name STRING NULL text to appear on left of state icon
    icon STRING NULL mat icon anme
    value STRING NULL value that corresponds to the state value of data
    color STRING NULL color for icon and text

    Sample Configurations

    Here is a basic setup:


    Here is max setup


    Scrolling (Comming Soon)

    There is a scrollTo binding thats being implemented - comming soon


    npm i panel-navigator

    DownloadsWeekly Downloads






    Unpacked Size

    98.7 kB

    Total Files


    Last publish


    • wavecoders