Skip to content

Instantly share code, notes, and snippets.

@phirefly
Created October 23, 2013 15:19
Show Gist options
  • Save phirefly/7120713 to your computer and use it in GitHub Desktop.
Save phirefly/7120713 to your computer and use it in GitHub Desktop.
Basic bootstrap 3 nav in haml
%nav.navbar.navbar-default{role: "navigation"}
/ Brand and toggle get grouped for better mobile display
.navbar-header
%button.navbar-toggle{"data-target" => ".navbar-ex1-collapse", "data-toggle" => "collapse", type: "button"}
%span.sr-only Toggle navigation
%span.icon-bar
%span.icon-bar
%span.icon-bar
%a.navbar-brand{href: "#"} Brand
/ Collect the nav links, forms, and other content for toggling
.collapse.navbar-collapse.navbar-ex1-collapse
%ul.nav.navbar-nav
%li.active
%a{href: "#"} Link
%li
%a{href: "#"} Link
%li.dropdown
%a.dropdown-toggle{"data-toggle" => "dropdown", href: "#"}
Dropdown
%b.caret
%ul.dropdown-menu
%li
%a{href: "#"} Action
%li
%a{href: "#"} Another action
%li
%a{href: "#"} Something else here
%li
%a{href: "#"} Separated link
%li
%a{href: "#"} One more separated link
%form.navbar-form.navbar-left{role: "search"}
.form-group
%input.form-control{placeholder: "Search", type: "text"}/
%button.btn.btn-default{type: "submit"} Submit
%ul.nav.navbar-nav.navbar-right
%li
%a{href: "#"} Link
%li.dropdown
%a.dropdown-toggle{"data-toggle" => "dropdown", href: "#"}
Dropdown
%b.caret
%ul.dropdown-menu
%li
%a{href: "#"} Action
%li
%a{href: "#"} Another action
%li
%a{href: "#"} Something else here
%li
%a{href: "#"} Separated link
/ /.navbar-collapse
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment