Navigation

less than 1 minute read

References

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" }
    ]
});

React

import * as React from "react";
import { Nav } from "gd-sprest-bsx";

export class IDemo extends React.Component {
    // Render the component
    render() {
        return (
            <Nav
                isPills={true}
                items={[
                    { title: "Nav 1", isActive: true },
                    { title: "Nav 2" },
                    { title: "Nav 3" },
                    { title: "Nav 4" },
                    { title: "Nav 5" }
                ]}
            />
        );
    }
}

VueJS

<template>
    <Nav isPills="true" v-bind:items="navItems" />
</template>

<script>
import { Nav } from "gd-sprest-bs-vue";
export default {
    components: { Nav },
    data() {
        return {
            navItems: [
                { title: "Nav 1", isActive: true },
                { title: "Nav 2" },
                { title: "Nav 3" },
                { title: "Nav 4" },
                { title: "Nav 5" }
            ]
        };
    }
}
</script>

Code Playground