Navmenu

Navmenu is a vertical navigation component. By default it shares it look and feel with the navmenu component.

Custom width

The navmenu is 300px wide by default. You can change this by customizing the @navmenu-width variable or by setting the width of .navmenu in your CSS.

Default navmenu

<nav class="navmenu navmenu-default" role="navigation">
  <a class="navmenu-brand" href="#">Brand</a>

  <ul class="nav navmenu-nav flex-column">
    <li class="nav-item active"><a class="nav-link" href="#">Link</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
    <li class="nav-item dropdown">
      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu navmenu-nav" role="menu">
        <li class="nav-item"><a class="nav-link" href="#">Action</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
        <li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
</nav>

Make navmenus accessible

Be sure to add a role="navigation" to every navmenu to help with accessibility.

Fixed to left or right

Add either .navmenu-fixed-left or .navmenu-fixed-right.

<nav class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm" role="navigation">
  ...
</nav>

Body padding required

The fixed navmenu will overlay your other content, unless you add padding to the left or right of the <body>. Try out your own values or use our snippet below. Tip: By default, the navmenu is 300px wide.

@media (min-width: 992px) {
  body {
    padding-left: 300px;
  }
}

Make sure to include this after the Jasny Bootstrap CSS.

Off canvas

With the offcanvas plugin, you can hide the navmenu off canvas. This is especially useful for screens with a small viewport.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.

<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
...
</nav>

<header class="navbar navbar-light bg-light fixed-top">
  <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
    <span class="navbar-toggler-icon"></span>
  </button>
</header>

Examples

There is a full example for an off canvas push menu as well as examples for an off canvas navmenu with an slide in and reveal effect.

Inverted navmenu

Modify the look of the navmenu by adding .navmenu-inverse.

<nav class="navmenu navmenu-inverse" role="navigation">
  ...
</nav>

Alerts

Fixed to top / bottom

Add .alert-fixed-top top stick the alert on top of your page. Use .alert-fixed-bottom for the bottom.

Success! Your action has been completed successfully.

<div class="alert alert-success alert-fixed-top">
  <strong>Success!</strong> Your action has been completed successfully.
</div>

Buttons

Labels

Give a button some extra style by adding a label. Add .btn-labeled to any button with a label.

<!-- Standard button with label -->
<button type="button" class="btn btn-labeled btn-secondary"><span class="btn-label"><i class="fa fa-arrow-left"></i></span>Left</button>

<!-- Standard button with label on the right side -->
<button type="button" class="btn btn-labeled btn-secondary">Right<span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i></span></button>

<!-- Success button with label -->
<button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="fa fa-check"></i></span>Success</button>

<!-- Danger button with label -->
<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="fa fa-times"></i></span>Danger</button>

Off canvas offcanvas.js

Example

The offcanvas plugin allows you to hide an element from sight and than show it by moving either that or any other element. It's intended to be used for off canvas navigation, like push menus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.

<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
  <a class="navmenu-brand" href="#">Brand</a>

  <ul class="nav navmenu-nav flex-column">
    <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  </ul>
</nav>

<header class="navbar navbar-light bg-light fixed-top">
  <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
    <span class="navbar-toggler-icon"></span>
  </button>
</header>

Examples

For better understanding, have a look at the off canvas slide in menu, off canvas push menu and off canvas reveal menu examples.

Usage

Add .offcanvas to hide an element. Alternatively add .offcanvas-* to hide an element up to a specific viewport width. Adding the .offcanvas class is not required. You may also hide an element by any other means.

The effect works best for elements positioned to the top, bottom, left or right of the window, either with absolute or fixed positioning.

When shown, the plugin adds .canvas-slid to the element that has slid.

Via data attributes

Add data-toggle="offcanvas" and a data-target to control, assigning it to show and hide the target element. The data-target attribute accepts a CSS selector to apply the collapse to.

Optionally add a data-canvas attribute to slide a canvas instead of only the target element. For a push menu set data-canvas="body".

Via JavaScript

Call the offcanvas via javascript:

$('.navmenu').offcanvas()

Options

Options can be placed both on control and on target menu element.

Name	type	default	description
canvas	string	false	If set, the canvas will be moved on show and hide instead of the target element. This creates alternative effects.
toggle	boolean	true	Toggles the off canvas element on invocation
placement	string	'auto'	Where to position the element at the start of the animation. For example, if placement is "left", the element will slide from left to right. The default option "auto" guesses the placement based on position and dimension.
autohide	boolean	true	Hide the off canvas element if clicked anywhere other that the element.
recalc	boolean	true	Calculate if off canvas should be disabled for this viewport width on window resize. If your elements always gets hidden on window resize, try setting this to false.
exclude	string	null	Set css selectors for elements, that have fixed positioning and that should not be moved when showing\hiding menu.
disableScrolling	boolean	true	Disable scrolling when the off canvas element is shown, by setting overflow to hidden for the body.
backdrop	boolean	false	If backdrop should be shown when menu is opened, in modal-like style.

Graceful degradation

For browsers that don't support transform (mainly IE8), the target option is ignored. In that case, the plugin will always slide the target element. In that case .canvas-slid will be added to the target element instead.

Two menus on the page

If there are two (or more) menus on the page, there can be only one opened at a time. When menu attempts to be opened, already opened one will be closed first. It's almost fully automated, accept that data-exclude option should be set for each menu, holding references to other menus. For example, if we have two menus #menu-left and #menu-right, then they should have the following option set, correspondingly: data-exclude="#menu-right" and data-exclude="#menu-left".

Methods

.offcanvas(options)

Initializes the off canvas element with an optional options.

.offcanvas('toggle')

Toggles an off canvas element to shown or hidden.

.offcanvas('show')

Shows an off canvas element.

.offcanvas('hide')

Hides an off canvas element.

Events

Event Type	Description
show.bs.offcanvas	This event fires immediately when the show instance method is called.
shown.bs.offcanvas	This event is fired when the target has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.offcanvas	This event is fired immediately when the hide instance method has been called.
hidden.bs.offcanvas	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Row link rowlink.js

Example

This plugin turns a table row into a clickable link.

Name	Description	Actions
File input	The file input plugin allows you to create a visually appealing file widgets.	Action
jasny.net	Shared knowledge of Arnold Daniels aka Jasny.	Action
Launch modal	Toggle a modal via JavaScript by clicking this row.	Action

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#fileinput">File input</a></td><td>The file input plugin allows you to create a visually appealing file widgets.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

Usage

Via data attributes

Add class .rowlink and attribute data-link="row" to a <table> or <tbody> element. For other options append the name to data-, as in data-target="a.mainlink" A cell can be excluded by adding the .rowlink-skip class to the <td>.

Via JavaScript

Call the row link via javascript:

$('tbody.rowlink').rowlink()

Options

Name	type	default	description
target	string	'a'	A jquery selector string, to select the link element within each row.

Methods

.rowlink(options)

Makes the rows of a table or tbody clickable.

File input fileinput.js

Examples

The file input plugin allows you to create a visually appealing file or image input widgets.

In first of the following examples one can easily add support for file icon, how it previously was, untill Bootstrap dropped Glyphicons. Include the link to iconic font on the page, and replace the following line

<span class="fileinput-filename"></span>

with the following (glyphicon classes should be changed to the ones that you use):

<i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename with-icon"></span>

File input widgets

Remove Select file Change

<div class="fileinput fileinput-new input-group" data-provides="fileinput">
  <div class="form-control" data-trigger="fileinput">
    <span class="fileinput-filename"></span>
  </div>
  <span class="input-group-append">
    <span class="input-group-text fileinput-exists" data-dismiss="fileinput">
      Remove
    </span>

    <span class="input-group-text btn-file">
      <span class="fileinput-new">Select file</span>
      <span class="fileinput-exists">Change</span>
      <input type="file" name="..." multiple>
    </span>
  </span>
</div>

Select file Change ×

<div class="fileinput fileinput-new" data-provides="fileinput">
  <span class="btn btn-outline-secondary btn-file">
    <span class="fileinput-new">Select file</span>
    <span class="fileinput-exists">Change</span>
    <input type="file" name="..." multiple>
  </span>
  <span class="fileinput-filename"></span>
  <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
</div>

Image upload widgets

When uploading an image, it's possible to show a thumbnail instead of the filename.

Select image Change Remove

<div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-preview img-thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
  <div>
    <span class="btn btn-outline-secondary btn-file">
      <span class="fileinput-new">Select image</span>
      <span class="fileinput-exists">Change</span>
      <input type="file" name="...">
    </span>
    <a href="#" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>

Select imageChange Remove

<div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-new img-thumbnail" style="width: 200px; height: 150px;">
    <img data-src="holder.js/100%x100%"  alt="...">
  </div>
  <div class="fileinput-preview fileinput-exists img-thumbnail" style="max-width: 200px; max-height: 150px;"></div>
  <div>
    <span class="btn btn-outline-secondary btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
    <a href="#" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>

Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.

Usage

Add .fileinput to the container. Elements inside the container with .fileinput-new and .fileinput-exists are shown or hidden based on the current state. A preview of the selected file is placed in .fileinput-preview. The text of .fileinput-filename gets set to the name of the selected file.

Multiple file uploads can be handled by adding multiple attribute to file input element. Names of files are shown in name preview, joined by comma. In image preview only the first image is shown.

The file input widget should be placed in a regular <form> replacing a standard <input type="file">. The server side code should handle the file upload as normal.

Via data attributes

Add data-provides="fileinput" to the .fileinput element. Implement a button to clear the file with data-dismiss="fileinput". Add data-trigger="fileinput" to any element within the .fileinput widget to trigger the file dialog.

Via JavaScript

$('.fileinput').fileinput()

Layout

Using the given elements, you can layout the upload widget the way you want, either with a fixed width and height or with max-width and max-height.

Options

Name	type	description
name	string	Use this option instead of setting the `name` attribute on the `<input>` element to prevent it from being part of the post data when not changed.
clearName	boolean	Sets if file input name should be cleared when input is cleared. It's `true` by default, to tell the server the difference between pressing clear and submit without a change in a normal form.
maxSize	float	Use this option if you want to limit file upload size. It's in `MB` and should be set for `.fileinput` element. For ex. `data-max-size="3"` allows upload only for files with size <= 3MB. If several files are selected, and only one of them is greater then this option value, all files will be discarded. Event `max_size.bs.fileinput` is triggered on discard.
exif	bool	Enable this to rotate the image based on the orientation from the [Exif](https://en.wikipedia.org/wiki/Exif) meta data.

Methods

.fileinput(options)

Initializes a file upload widget.

.fileinput('clear')

Clear the selected file.

.fileinput('reset')

Reset the form element to the original value.

Events

Event Type	Description
change.bs.fileinput	This event is fired after a file is selected.
clear.bs.fileinput	This event is fired when the file input is cleared.
reset.bs.fileinput	This event is fired before the file input is reset.
reseted.bs.fileinput	This event is fired after the file input is reset.
max_size.bs.fileinput	This event is fired, if at least one of selected files has size greater then `maxSize` option, before input is cleared.

Components

Navmenu

Custom width

Default navmenu

Make navmenus accessible

Fixed to left or right

Body padding required

Off canvas

Examples

Inverted navmenu

Alerts

Fixed to top / bottom

Buttons

Labels

Off canvas offcanvas.js

Example

Examples

Usage

Via data attributes

Via JavaScript

Options

Graceful degradation

Two menus on the page

Methods

.offcanvas(options)

.offcanvas('toggle')

.offcanvas('show')

.offcanvas('hide')

Events

Row link rowlink.js

Example

Usage

Via data attributes

Via JavaScript

Options

Methods

.rowlink(options)

File input fileinput.js

Examples

File input widgets

Image upload widgets

Usage

Via data attributes

Via JavaScript

Layout

Options

Methods

.fileinput(options)

.fileinput('clear')

.fileinput('reset')

Events