Skip to content

Navbar

Jump to bottom Edit New page
l0rdn1kk0n edited this page Jul 17, 2012 · 7 revisions

Static navbar example

An example of a static (not fixed to the top) navbar with project name, navigation, and search form.

static navbar

Navbar Wicket Component

This is a sample implementation of the Navbar component. The Navbar component adds the necessary css class names (e.g. active state of buttons).

Navbar navbar = new Navbar("wicket-markup-id");
navbar.fluid();
navbar.brandName(Model.of("Project name"));
    
navbar.addButton(Position.LEFT,
        new NavbarButton<Home>(Home.class, Model.of("Home")),
        new NavbarButton<LinkPage>(LinkPage.class, Model.of("Link")),
        ...);

Navbar Wicket Markup

The wicket markup for the Navbar component must be a div tag else you will get a MarkupException while rendering the page.

<body>
    <div wicket:id="wicket-markup-id"></div>
</body>

Dropdown

Dropdown

Navbar navbar = new Navbar("wicket-markup-id");
navbar.addButton(Position.RIGHT,
                  new NavbarDropDownButton("button").setButtonLabel(Model.of("More..."))
                          .addMenuButton(new MenuPageButton<Home>(Home.class, Model.of("Overview")).setIcon(new Icon(IconType.Home)),
                                         new MenuDivider(),
                                         new MenuHeader(Model.of("Header")),
                                         new MenuPageButton<Scaffolding>(Scaffolding.class, Model.of("Scaffolding")).setIcon(new Icon(IconType.AlignJustify))));

Responsive Design

The default implementation of the Navbar component adds automatically all necessary markup to react on different resolutions (Smartphone, Tablet, Browser). It wraps the nav content in a containing div, .nav-collapse.collapse, and adds the navbar toggle button, .btn-navbar.

navbar with responsive design (closed) navbar with responsive design (opened)

    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
     
          <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
     
          <!-- Be sure to leave the brand out there if you want it shown -->
          <a class="brand" href="#">Project name</a>
     
          <!-- Everything you want hidden at 940px or less, place within here -->
          <div class="nav-collapse">
            <!-- .nav, .navbar-search, .navbar-form, etc -->
          </div>
 
        </div>
      </div>
    </div>

Copyright and license

Copyright 2012 AgileCoders.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Main

Configuration

Core-Components

Everything Else

Additional Information

Clone this wiki locally