Navigation

Navigation example

Creates the main Pulsar navigation from a JSON object.

Implementation

The navigation component depends on the javascript NavigationComponent, this is a global component and should always be available to a Pulsar UI.

JSON example

{
    "1": {
        "label": "First",
        "class": "",
        "href": '#first-item',
        "icon": "pencil",
        "items": {
            "1.1": {
                "1.1.1": {
                    "label": "One",
                    "href": "#one"
                },
                "1.1.2": {
                    "label": "Two",
                    "href": "#two"
                }
            },
            "1.2": {
                "1.2.1": {
                    "label": "Three",
                    "href": "#three"
                },
                "1.2.2": {
                    "label": "Four",
                    "href": "#four"
                }
            }
        }
    },
    "2": {
        "label": "Second",
        "class": "",
        "href": '#second',
        "icon": "check-sign",
        "items": {
            "2.1": {
                "2.1.1": {
                    "label": "Five",
                    "href": "#five"
                }
            }
        }
    }
}

Options

Option Type Description
class string Classes to be applied to the button group (not the buttons inside it)
href string The URL, top level items should define unique #fragments
icon string An optional icon, mainly used on primary navigation items
image string An image icon for primary navigation, overrides icon
image_alt string Alt attribute for the image
label string Text label used in the links

Primary navigation

The top level links should contain both an icon and a label element. The Jadu branding, 'home' and 'search' navigation elements are automatically added so you don't need to define these in the JSON.

The href attribute will also be used to link together the related secondary navigation element.

The items element should contain nested elements that will be turned into the secondary navigation items.

Secondary navigation

Secondary navigation items can be grouped together in blocks which will be visually separated for the user. Blocks are defined by nesting multiple objects.

Codepen

See the Pen Navigation component by Paul Stanton (@stanton) on CodePen.

results matching ""

    No results matching ""