Arbitrary content in top-nav dropdown in Foundation 5?

Question

I'm trying to put arbitrary content inside a dropdown in the nav bar for Zurb Foundation 5. Essentially, all I want is a login button that opens a login form dropdown. It seems that Foundation only supports <ul> lists for dropdowns in the top bar, even though dropdowns outside of the nav bar let you use any content with a f-dropdown content class.

This is pretty simple to accomplish with Bootstrap, but I was under the impression that Foundation is designed to be more customizable. Surely this is possible? Another example use case is the StackExchange logo dropdown - it contains various scrollable content, including a search form. How can something like that be built in Foundation?

Answer 1

It is simple to do in Foundation aswell, unless I misunderstood what you want - couldn't you just simply do something like this?

<li class="has-drodown">
   <a href="#"><img src=""></a>
   <ul class="dropdown">add your login form here..</ul>
</li>

There's alot of examples in the docs: http://foundation.zurb.com/docs/components/topbar.html

If you don't want the dropdown to show on hover, you can add is_hover: false to data-options - like so:

<nav class="top-bar" data-topbar data-options="is_hover: false">

Answer 2

http://foundation.zurb.com/docs/v/3.2.5/navigation.php#btopEx

Arbitrary Content Dropdowns

You can also have dropdowns with a specific size which can contain any kind of content, including rows and columns.

Hope this helps!