Extra html inside active <li> item

[mileszim]

Is it possible to add an extra bit of html (like a span tag) in whatever

item is active?

[albertein]

Right now it supposed to only add the selected class to the li element and to the link as documented on the source code: https://github.com/andi/simple-navigation/blob/master/lib/simple_navigation/rendering/renderer/list.rb#L4

Why would you need to wrap the element?

You can use the active class to match the element and style it as desired.

[andi]

You can wrap all the items using the name_generator feature:

If you need to add custom html around item names, you can define a

proc that will be called with the name you pass in to the navigation.

The example below shows how to wrap items spans.

navigation.name_generator = Proc.new {|name| "#{name}"}

But you cannot wrap the active item only. But as Alberto said, I can not
come up with a scenario where this would be needed. Can you describe your
use case?

On Wed, Jun 19, 2013 at 1:52 AM, Alberto Avila notifications@github.comwrote:

Right now it supposed to only add the selected class to the li element and
the link

Why would you need to wrap the element?

You can use the active class to match the element and style it as desired.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/132#issuecomment-19651339
.

[albertein]

If there is a use case for that i think the best path would be to invoke the change_generator proc with a second argument indicating if the item should be selected, like: SimpleNavigation.config.name_generator.call(@name, selected?) on core/item.rb

[mileszim]

I'm not trying to wrap the active item, but add an extra bit of html inside the

tag, like:

<li>My Nav Link <span class="active-arrow"></span></li>

[albertein]

You can do that with css, using the :after pseudo selector.

I put together a quick example, hope that it works for you: http://jsfiddle.net/albertein/SRGqQ/1/

[andi]

I guess that really does not need additional markup. Closing this. If you think you still need special markup, please write again...

[phansch]

Unfortunately content doesn't support html, only text. I want to add font-awesome icons to the beginning of some list elements, but it seems it is not so easy. I am using the name_generator to derive the font-awesome icon from the icon key, but ideally the name should just be a name.

navigation.name_generator = lambda do |name, item|
  "<i class=\"fa fa-#{item.key}\"></i> #{name}"
end

primary.item "file-text-o", "Files", "/"

[simonc]

@phansch Using name_generator is the easiest way to do it (doing what you're trying to do is the reason I added item as a second argument to the block.

If abusing name_generator makes you uncomfortable, the idea is that you can create your own navigation renderer to suit your needs :-)