Bootstrap framework Alerts Badges Breadcrumbs Buttons Button group Contextual Dropdown Elements Form Form group Form horizontal Form inline Glyphicons Grid Images Listgroup Modal Navbar Navs Panels Progress Tables Tabs Tooltip Sidebar Wells

Barebone\Bootstrap\Navbar

Default navbar

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

<?php
    // create nav element and add items
    $nav = new Barebone\Bootstrap\Nav();
    $nav->addItem('Home', '/', true);
    $nav->addItem('Contact', '/contact/');
    $nav->addItem('Messages', '/messages/');
    echo $navbar;
Example
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Barebone</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar6aa117dc5f2a9">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar6aa117dc5f2a9">
<ul class="nav navbar-nav">
<li class="active">
<a href="/">Home</a>
</li>
<li>
<a href="/contact/">Contact</a>
</li>
<li>
<a href="/messages/">Messages</a>
</li>
</ul>
</div>
</div>
</nav>

Forms

$navbar->addForm($form); places form content within .navbar-form for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.

As a heads up, .navbar-form shares much of its code with .form-inline via mixin. Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.

<?php
    // create a form and some elements
    $form = new Barebone\Bootstrap\Form(["class" => "navbar-left"]);
    $query = new Barebone\Bootstrap\FormGroup(null, 'query', ['type' => 'text']);
    $searchbtn = new Barebone\Bootstrap\Button('Search');
    $form->addFormGroup($query);
    $form->append($searchbtn);
    // create navbar element
    $navbar = new Barebone\Bootstrap\Navbar('Barebone');
    // add the form element to the navbar element
    $navbar->addForm($form);
    echo $navbar;
Example
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Barebone</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar6aa117dc5f535">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar6aa117dc5f535">
<form class="navbar-left navbar-form" role="form">
<div class="form-group">
<input type="text" name="query" class="form-control" id="query"></div>
<button type="button" class="btn btn-default">Search</button>
</form>
</div>
</div>
</nav>

Buttons

Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar.

You would add a button to navbar like this $navbar->addButton('Tekst', 'context', 'callback')

<?php
    // create navbar element
    $navbar = new Barebone\Bootstrap\Navbar('Barebone');
    $navbar->addButton('Default', '#'); // default
    $navbar->addButton('Primary', 'primary', "alert('fubar')");
    echo $navbar;
Example
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Barebone</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar6aa117dc5f56d">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar6aa117dc5f56d">
<button type="button" class="btn btn-default navbar-btn">Default</button>
<button type="button" class="btn btn-primary navbar-btn" onclick="alert('fubar')">Primary</button>
<button type="button" class="btn btn-info navbar-btn" onclick="alert('fubar')">Info</button>
<button type="button" class="btn btn-success navbar-btn" onclick="alert('fubar')">Success</button>
<button type="button" class="btn btn-warning navbar-btn" onclick="alert('fubar')">Warning</button>
<button type="button" class="btn btn-danger navbar-btn" onclick="alert('fubar')">Danger</button>
</div>
</div>
</nav>

Text

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

<?php
    // create navbar element
    $navbar = new Barebone\Bootstrap\Navbar('Barebone');
    $navbar->addText('Signed in as Mark Otto');
    echo $navbar;
Example
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Barebone</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar6aa117dc5f69c">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar6aa117dc5f69c">
<p class="navbar-text">Signed in as Mark Otto</p>
</div>
</div>
</nav>

Non-nav links

For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.

<?php
    // create navbar element
    $navbar = new Barebone\Bootstrap\Navbar('Barebone');
    $navbar->addText('Signed in as Signed in as <a href="#" class="navbar-link">Mark Otto</a>', ['class' => 'navbar-right']);
    echo $navbar;
Example
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Barebone</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar6aa117dc5f6c4">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar6aa117dc5f6c4">
<p class="navbar-right navbar-text">Signed in as Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
</div>
</nav>

Fixed to top

Adds .navbar-fixed-top and includes a .container or .container-fluid to center and pad navbar content.

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

<?php
    // create navbar element
    $navbar = new Barebone\Bootstrap\Navbar('Barebone');
    $navbar->addText('Signed in as Signed in as <a href="#" class="navbar-link">Mark Otto</a>', ['class' => 'navbar-right']);
    $navbar->fixedTo('top');
    echo $navbar;
Example
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Barebone</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar6aa117dc5f6ec">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar6aa117dc5f6ec">
<p class="navbar-right navbar-text">Signed in as Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
</div>
</nav>

Fixed to bottom

Adds .navbar-fixed-bottom and include a .container or .container-fluid to center and pad navbar content.

<?php
    // create navbar element
    $navbar = new Barebone\Bootstrap\Navbar('Barebone');
    $navbar->addText('Signed in as Signed in as <a href="#" class="navbar-link">Mark Otto</a>', ['class' => 'navbar-right']);
    $navbar->fixedTo('bottom');
    echo $navbar;
Example
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Barebone</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar6aa117dc5f735">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar6aa117dc5f735">
<p class="navbar-right navbar-text">Signed in as Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
</div>
</nav>

Static top

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top and include a .container or .container-fluid to center and pad navbar content.

Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.

Adds .navbar-fixed-bottom and include a .container or .container-fluid to center and pad navbar content.

<?php
    // create navbar element
    $navbar = new Barebone\Bootstrap\Navbar('Barebone');
    $navbar->addText('Signed in as Signed in as <a href="#" class="navbar-link">Mark Otto</a>', ['class' => 'navbar-right']);
    $navbar->staticTop();
    echo $navbar;
Example
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Barebone</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar6aa117dc5f777">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar6aa117dc5f777">
<p class="navbar-right navbar-text">Signed in as Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
</div>
</nav>

Full example

<?php
    // create nav element and add items
    $nav = new Barebone\Bootstrap\Nav();
    $nav->addItem('Home', '/', true);
    $nav->addItem('Contact', '/contact/');
    $nav->addItem('Messages', '/messages/');
    // create a form and some elements
    $form = new Barebone\Bootstrap\Form(["class" => "navbar-right"]);
    $query = new Barebone\Bootstrap\FormGroup(null, 'query', ['type' => 'text']);
    $searchbtn = new Barebone\Bootstrap\Button('Search');
    $form->addFormGroup($query);
    $form->append($searchbtn);
    // add dropdown to th nav element
    $nav->addDropDown('Dropdown', ['Caption1' => '#', 'Caption2' => '#', 'Caption3' => '#']);
    // add form to the nav element
    $nav->addForm($form);
    // create navbar element
    $navbar = new Barebone\Bootstrap\Navbar('Barebone');
    // add the nav and form element to the navbar element
    $navbar->addForm($form);
    $navbar->addNav($nav);
    //add a dropdown to the navbar
    $navbar->addDropDown('Dropdown', ['Caption1' => '#', 'Caption2' => '#', 'Caption3' => '#', 'Caption4' => '#'], ["class" => "navbar-right"]);
    echo $navbar;
    // inverse navbar
    $navbar = new Barebone\Bootstrap\Navbar('Barebone', 'inverse');
    $navbar->addForm($form);
    $navbar->addNav($nav);
    echo $navbar;
Example
<nav role="navigation" class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Barebone</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar6aa117dc5f7b9">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar6aa117dc5f7b9">
<ul class="nav navbar-nav">
<li class="active">
<a href="/">Home</a>
</li>
<li>
<a href="/contact/">Contact</a>
</li>
<li>
<a href="/messages/">Messages</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Caption1</a>
</li>
<li>
<a href="#">Caption2</a>
</li>
<li>
<a href="#">Caption3</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Caption1</a>
</li>
<li>
<a href="#">Caption2</a>
</li>
<li>
<a href="#">Caption3</a>
</li>
<li>
<a href="#">Caption4</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

  • Barebone\Bootstrap\Navbar

    Barebone\Bootstrap\Navbar extends Barebone\Bootstrap\Element
    • [P] $_id : mixed
    • [P] $container : mixed
    • [P] $collapsable : mixed
    • [M] __construct( $brandname, $type, $fluid ) : void
    • [M] addContainer( $fluid ) : void
    • [M] addNavbarHeaderToContainer( $brandname ) : void
    • [M] addCollapsable() : void
    • [M] addNav( Barebone\Bootstrap\Nav $nav ) : void
    • [M] addText( $text, $attributes ) : void
    • [M] addButton( $caption, $contextual, $callback ) : void
    • [M] addForm( Barebone\Bootstrap\Form $form ) : void
    • [M] addDropDown( $caption, $items ) : void
    • [M] fixedTo( $position ) : void
    • [M] staticTop() : void

    • Barebone\Bootstrap\Element

      Barebone\Bootstrap\Element extends Barebone\HTML\TElement
      • [M] __construct( string $tag, array $attributtes ) : void
      • [M] muted( string $context ) : void
        ↳ trait: Barebone\Bootstrap\Traits\Contextual
      • [M] primary( string $context ) : void
        ↳ trait: Barebone\Bootstrap\Traits\Contextual
      • [M] success( string $context ) : void
        ↳ trait: Barebone\Bootstrap\Traits\Contextual
      • [M] info( string $context ) : void
        ↳ trait: Barebone\Bootstrap\Traits\Contextual
      • [M] warning( string $context ) : void
        ↳ trait: Barebone\Bootstrap\Traits\Contextual
      • [M] danger( string $context ) : void
        ↳ trait: Barebone\Bootstrap\Traits\Contextual
      • [M] align( string $alignement ) : void
        ↳ trait: Barebone\Bootstrap\Traits\Visibility
      • [M] invisible() : void
        ↳ trait: Barebone\Bootstrap\Traits\Visibility
      • [M] hide() : void
        ↳ trait: Barebone\Bootstrap\Traits\Visibility
      • [M] show() : void
        ↳ trait: Barebone\Bootstrap\Traits\Visibility
      • [M] tooltip( string $tooltip, string $placement ) : void
        ↳ trait: Barebone\Bootstrap\Traits\Interactive
      • [M] popover( string $title, string $content, string $placement ) : void
        ↳ trait: Barebone\Bootstrap\Traits\Interactive

      • Barebone\HTML\TElement

        Barebone\HTML\TElement
        • [P] $tag : string
        • [P] $innertext : string
        • [P] $children : array
        • [P] $attributes : array
        • [P] $non_closing_tags : mixed
        • [M] __construct( string $tag, array $attributes ) : void
        • [M] append( Barebone\HTML\TElement $element ) : void
        • [M] prepend( Barebone\HTML\TElement $element ) : void
        • [M] class_exists( $cssclass ) : void
        • [M] add_class( $cssclass ) : void
        • [M] remove_class( $cssclass ) : void
        • [M] innertext( string $value ) : void
        • [M] data( string $name, string $value ) : void
        • [M] aria( string $name, string $value ) : void
        • [M] on( string $event, string $callback ) : void
        • [M] css( string $identifier, string $rule ) : void
        • [M] wrap( string $tagname, array $attributes ) : void
        • [M] enable() : void
        • [M] disable() : void
        • [M] has_closing_tag() : void
        • [M] has_children() : void
        • [M] count_children() : void
        • [M] get_children() : void
        • [M] replace_child( $key, $new_child ) : void
        • [M] get_child( $key ) : void
        • [M] __unset( $name ) : void
        • [M] __isset( $name ) : void
        • [M] __set( $name, $value ) : void
        • [M] __get( $name ) : void
        • [M] render() : void
        • [M] __toString() : string
        • [M] editable() : void