Navbar

Documentation

JavaScript

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

// Create the navbar
var el = document.querySelector("#navbar");
var navbar = Components.Navbar({
    el: el,
    brand: "Navbar",
    searchBox: {
        onChange: function(value) {
            // Log the value
            console.log("The search value is: " + value);
        },
        onSearch: function(value) {
            // Log the value
            console.log("The search value is: " + value);
        }
    },
    items: [
        {
            text: "Home",
            isActive: true
        },
        {
            text: "Link"
        },
        {
            text: "Disabled Link",
            isDisabled: true
        },
        {
            text: "Dropdown Link",
            items: [
                { text: "Link 1" },
                { text: "Link 2" },
                { text: "Link 3" },
                { text: "Link 4" },
                { text: "Link 5" }
            ]
        }
    ]
});

TypeScript

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

// Create the navbar
let el = document.querySelector("#navbar");
let navbar = Components.Navbar({
    el: el,
    brand: "Navbar",
    searchBox: {
        onChange: (value) => {
            // Log the value
            console.log("The search value is: " + value);
        },
        onSearch: (value) => {
            // Log the value
            console.log("The search value is: " + value);
        }
    },
    items: [
        {
            text: "Home",
            isActive: true
        },
        {
            text: "Link"
        },
        {
            text: "Disabled Link",
            isDisabled: true
        },
        {
            text: "Dropdown Link",
            items: [
                { text: "Link 1" },
                { text: "Link 2" },
                { text: "Link 3" },
                { text: "Link 4" },
                { text: "Link 5" }
            ]
        }
    ]
});

Web Component

// Return the navbar properties return { searchBox: { onChange: logSearchValue, onSearch: logSearchValue }, items: [ { text: "Home", isActive: true }, { text: "Link" }, { text: "Disabled Link", isDisabled: true }, { text: "Dropdown Link", items: [ { text: "Link 1" }, { text: "Link 2" }, { text: "Link 3" }, { text: "Link 4" }, { text: "Link 5" } ] } ] };
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-navbar brand="Navbar">
    // Return the navbar properties
    return {
        searchBox: {
            onChange: function(value) {
                // Log the value
                console.log("The search value is: " + value);
            },
            onSearch: function(value) {
                // Log the value
                console.log("The search value is: " + value);
            }
        },
        items: [
            {
                text: "Home",
                isActive: true
            },
            {
                text: "Link"
            },
            {
                text: "Disabled Link",
                isDisabled: true
            },
            {
                text: "Dropdown Link",
                items: [
                    { text: "Link 1" },
                    { text: "Link 2" },
                    { text: "Link 3" },
                    { text: "Link 4" },
                    { text: "Link 5" }
                ]
            }
        ]
    };
</bs-navbar>

References

Navbar(props:INavbarProps):INavbar
Name Value
Dark 1
Light 2
Primary 3

INavbar

Name Returns Description
el Element The jquery element.

INavbarItem

Name Type Description
href string The ‘href’ property of the link.
isActive boolean Adds the ‘active’ class name.
isDisabled boolean Adds the ‘disabled’ class name.
items Array<INavbarItem> The navbar sub-items.
onClick (item:INavbarItem, ev:Event) => void The click event for the item.
type number The navbar type. Reference the NavbarTypes

INavbarProps

Name Type Description
btnType string The search button type. Reference the ButtonTypes
btnText string The search button text.
id string The navbar id.
onChange (value:string, ev:Event) => void The search box change event.
onSearch (value:string, ev:Event) => void The search box button click event.
placeholder string The search box placeholder.

INavbarSearchBox

Name Type Description
btnProps IButtonProps The button properties.
className string The class name to apply to navbar.