Navigation

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the navigation
var el = document.querySelector("#navigation");
var nav = Components.Nav({
    el: el,
    isPills: true,
    items: [
        { title: "Nav 1", isActive: true },
        { title: "Nav 2" },
        { title: "Nav 3" },
        { title: "Nav 4" },
        { title: "Nav 5" }
    ]
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the navigation
let el = document.querySelector("#navigation");
let nav = Components.Nav({
    el: el,
    isPills: true,
    items: [
        { title: "Nav 1", isActive: true },
        { title: "Nav 2" },
        { title: "Nav 3" },
        { title: "Nav 4" },
        { title: "Nav 5" }
    ]
});

Web Component

// Return the nav properties return { items: [ { title: "Nav 1", isActive: true }, { title: "Nav 2" }, { title: "Nav 3" }, { title: "Nav 4" }, { title: "Nav 5" } ] };
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-nav is-pills="true">
    // Return the nav properties
    return {
        items: [
            { title: "Nav 1", isActive: true },
            { title: "Nav 2" },
            { title: "Nav 3" },
            { title: "Nav 4" },
            { title: "Nav 5" }
        ]
    };
</bs-nav>

References

Nav(props:INavProps):INav
Name Value
Danger 1
Dark 2
Info 3
Light 4
Primary 5
Secondary 6
Success 7
Warning 8

INav

Name Returns Description
el Element The jquery element.

INavProps

Name Type Description
className string The class name to apply to navigation.
content string The navigation content.
el HTMLElement The element to render the navigation to.
header string The navigation header.
href string Renders the navigation as an anchor element instead of a span element.
isPill boolean Adds the ‘navigation-pill’ class name.
type number The navigation type. Reference the NavigationTypes enumerator