Navbars

Using the <d-navbar> component you can create powerful and responsive navigation headers.

Basic Example


<d-navbar toggleable="md" type="dark" theme="primary">
  <d-navbar-toggle target="nav-collapse"></d-navbar-toggle>
  <d-navbar-brand>
      <h6 class="text-white my-auto mr-4">Shards Vue</h6>
  </d-navbar-brand>

  <d-collapse is-nav id="nav-collapse">
    <d-navbar-nav>
        <d-nav-item href="#">Link</d-nav-item>
        <d-nav-item href="#" disabled>Disabled</d-nav-item>
        <d-dropdown text="Dropdown" is-nav>
            <d-dropdown-item>Action</d-dropdown-item>
            <d-dropdown-item>Another action</d-dropdown-item>
            <d-dropdown-item>Something else here</d-dropdown-item>
            <d-dropdown-divider />
            <d-dropdown-item>Separated link</d-dropdown-item>
        </d-dropdown>
    </d-navbar-nav>

    <d-navbar-nav class="ml-auto">
        <d-input-group seamless>
            <d-input-group-text slot="prepend">
                <fa :icon="['fas', 'search']" />
            </d-input-group-text>
            <d-input size="sm" placeholder="Search..."/>
        </d-input-group>
    </d-navbar-nav>

  </d-collapse>
</d-navbar>

<!-- navbar-1.vue -->

Themes and Text Colors

The <d-navbar> component supports all available color themes as well as text color types such as dark or light.

Placement

You an control the placement of the navbar component using the fixed and sticky props.

Props

Prop	Description	Type	Default	Required
:tag	The element tag.	`String`	"nav"	False
:type	The navbar type.	`String`	"light"	False
:theme	The theme color.	`String`		False
:toggleable	Whether the navbar is toggleable, or not. Also accepts String for breakpoint definition.	`String \| Boolean`	false	False
:fixed	Fix the navbar to either `top` or `bottom`.	`String`		False
:sticky	Whether the navbar should be sticky.	`Boolean`	false	False

Subcomponents

The following subcomponents are available for the <d-navbar/> component:

<d-navbar-brand/>

This subcomponent is inheriting Link component's props.

Props

Prop	Description	Type	Default	Required
:tag	-	`String`	"div"	False

<d-navbar-nav/>

Props

Prop	Description	Type	Default	Required
:tag	The element tag.	`String`	"ul"	False
:fill	Whether it should fill the entire space, or not.	`Boolean`	false	False
:justified	Whether to proportionally fill all abailable space, or not.	`Boolean`	false	False

<d-navbar-toggle/>

Props

Prop	Description	Type	Default	Required
:label	The label value.	`String`	"Toggle navigation"	False
:target	The toggle target.	`String`		True