Middleman - Bootstrap - Navigation example

_navbar.html.haml

-### NavBar Partial

-# Usage
-# = partial("#{pathPartials}/bootstrap/navbar")
-# Requires a /data/navigation.yaml file to be present

-# Check and warn if empty

- if data.navigation.blank?
    - puts "Data not found"

-# Navbar

%nav

    .navbar.navbar.navbar-fixed-top

        .navbar-inner

            .container-fluid

                -# Create the Nav Collapse Menu

                %button.btn.btn-navbar{ :data => { :toggle => :collapse, :target => ".nav-collapse" } }
                    %span.icon-bar
                    %span.icon-bar
                    %span.icon-bar

                -# Display the Brand Name

                %a.brand{ :href => "/" }

                    - if defined? navLogo and ! navLogo.blank?
                        %img{ :src => "/#{images_dir}/site/logo.png", :alt => "#{brand}", :width => "#{navLogoWidth}", :height => "#{navLogoHeight}" }

                    = brand

                .nav-collapse.collapse

                    %ul.nav

                        -# Loop through the Navigation Yaml

                        - data.navigation.each do |entry|

                            -# Check for presence of divider

                            - if entry.name === "divider-vertical"

                                %li.divider-vertical

                                -# Process any Dropdowns found

                            - elsif entry.name === "dropdown"

                                %li.dropdown

                                    %a.dropdown-toggle{ :href=> "#", :data => { :toggle => "dropdown" } }
                                        = entry.items[0].title
                                        %b.caret

                                    %ul.dropdown-menu

                                        - entry.items.each do |dropdown|

                                            / - if ! dropdown.title

                                            - if dropdown.name === "divider"

                                                %li.divider

                                            - elsif dropdown.name === "navheader"

                                                %li.nav-header
                                                    = dropdown.header

                                            - else

                                                %li
                                                    %a{ :href => "#{dropdown.url}" }
                                                        = dropdown.name

                            - else

                                %li
                                    %a{ :href=> "#{entry.url}" }
                                        = entry.name
                    -# Search Bar

                    - if defined? navSearch and ! navSearch.blank?

                        %form.navbar-form.pull-right
                            %input.search-query{ :type => :search, :placeholder => :Search }

navigation.yaml

### Navigation


# WHAT WE DO
# CLIENTS
---

### Who We Are

-   :name   : divider-vertical

-   :name   : Who We Are
    :url    : /pages/who-we-are
    :status : active

-   :name   : divider-vertical

### Blog Dropdown

-   :name   : dropdown
    :items:

    -   :title  : Blog

    -   :name   : Recent Articles
        :url    : pages/blog-articles
        :status : active

    ### Dropdown Divider

    -   :name   : divider

    ### Dropdown Nav Header

    -   :name   : navheader
        :header : Taxonomy
        :status : active

    -   :name   : Tags
        :url    : pages/blog-tags
        :status : active

    -   :name   : Categories
        :url    : pages/blog-categories
        :status : active

-   :name   : divider-vertical

### Our Work

-   :name   : Our Work
    :url    : /pages/our-work
    :status : active

-   :name   : divider-vertical

### What We do

-   :name   : What We Do
    :url    : /pages/what-we-do
    :status : active

-   :name   : divider-vertical

### Clients

-   :name   : Clients
    :url    : /pages/clients
    :status : active

-   :name   : divider-vertical

### Contact

-   :name   : Contact
    :url    : /pages/contact
    :status : active