README.md in navigator-0.7.0 vs README.md in navigator-0.8.0
- old
+ new
@@ -12,11 +12,11 @@
# Features
* Provides a simple DSL for building navigation menus.
* Supports auto-detection/highlighting of active menu items based on current path (customizable for non-path usage too).
* Supports sub-menus, nested tags, HTML attributes, etc.
-* Supports the following HTML tags: nav, ul, li, a, b, em, s, small, span, strong, sub, and sup.
+* Supports the following HTML tags: nav, section, h1-h6, ul, li, a, b, em, s, small, span, strong, sub, and sup.
* Provides an "item" convenience method which combines the "li" and "a" HTML tags into a single method for less typing.
# Requirements
0. Any of the following Ruby VMs:
@@ -77,10 +77,26 @@
<ul class="nav">
<li class="active"><a href="/dashboard">Dashboard</a></li>
<li><a href="/posts">Posts</a></li>
</ul>
+## Unordered List (with multiple data attributes)
+
+Code:
+
+ navigation do
+ item "Home", "/home", data: {id: 1, type: "public"}
+ end
+
+Result:
+
+ <ul>
+ <li data-id="1" data-type="public"><a href="/home">Home</a></li>
+ </ul>
+
+*TIP: Nested data-* attributes can be applied to any menu item in the same manner as Rails view helpers.*
+
## Nav (with links)
Code:
navigation "nav" do
@@ -97,20 +113,58 @@
## Foundation Menu
Code:
- navigation "ul", class: "left" do
- item "Home", root_path
- item "About", about_path
+ navigation "nav", class: "top-bar", "data-topbar" => nil do
+ ul nil, class: "title-area" do
+ li nil, class: "name" do
+ h1 do
+ a "Demo", href: "/home"
+ end
+ end
+ end
+
+ section nil, class: "top-bar-section" do
+ ul nil, class: "left" do
+ item "Home", "/"
+ item "About", "/about"
+ end
+
+ ul nil, class: "right" do
+ item "v1.0.0", '#'
+ end
+
+ ul nil, class: "right" do
+ item "Login", "/login", {}, {class: "button tiny round"}
+ end
+ end
end
Result:
- <ul class="ul" class: "left">
- <li class="active"><a href="/home">Home</a></li>
- <li><a href="/about">About</a></li>
- </ul>
+ <nav class="top-bar" data-topbar="">
+ <ul class="title-area">
+ <li class="name">
+ <h1><a href="/" class="active">Demo</a></h1>
+ </li>
+ </ul>
+
+ <section class="top-bar-section">
+ <ul class="left">
+ <li class="active"><a href="/">Home</a></li>
+ <li><a href="/about">About</a></li>
+ </ul>
+
+ <ul class="right">
+ <li><a href="#">v1.0.0</a></li>
+ </ul>
+
+ <ul class="right">
+ <li><a class="button tiny round" href="/login">Login</a></li>
+ </ul>
+ </section>
+ </nav>
## Bootstrap Dropdown
Code: