How to initialize a Navigation List

Hi chris.wilkinson.  I'd recommend having a look at the  links UI Component . This is the UI API which supports all of the collapsing lists of links in the UI, and it automatically renders overflowed links as a pop-up on desktop or sheet on mobile. The HTML structure you posted is close, but it's the output of the UI component, and not the source HTML it needs in order to initiate. That would closer to:

<div id="mobile-dashboard-ui-links" class="ui-links" data-maxlinks="50" data-minlinks="0">
	<ul>
		<li><a href="#">Foo</a></li>
		<li><a href="#">Bar</a></li>
		<li><a href="#">Baz</a></li>
        <li><a href="#" data-more>More</a></li>
        <li><a href="#" data-cancel>Cancel</a></li>
	</ul>
</div>

Three key things to note are the use of "ui-links" class, which triggers the ui component, as well as the "More" and "Cancel" links, which are rendered only when needed by the component. The use of other classes like navigation-list or navigation-list-item is completely arbitrary. 

It's also worth noting that this can render horizontally, vertically, or both. For example, the following with a configuration of horizontal and "data-maxlinks" constraint of 2 will render a horizontal list of "Foo", "Bar", "More", where "More" opens a pop-up (or sheet if on mobile) with "Baz", "Ham", "Eggs", and "Cancel".

<div id="mobile-dashboard-ui-links" class="ui-links" data-direction="horizontal" data-maxlinks="2" data-minlinks="0">
	<ul>
		<li><a href="#">Foo</a></li>
		<li><a href="#">Bar</a></li>
		<li><a href="#">Baz</a></li>
		<li><a href="#">Ham</a></li>
		<li><a href="#">Eggs</a></li>
        <li><a href="#" data-more>More</a></li>
        <li><a href="#" data-cancel>Cancel</a></li>
	</ul>
</div>

And if the data-maxlinks and/or the horizontal space of the links takes up more space than is available on a layout (desktop or mobile) it will automatically collapse the remaining links behind "More" to show as a pop-up or sheet.

Hope this helps!

Hi chris.wilkinson.  I'd recommend having a look at the  links UI Component . This is the UI API which supports all of the collapsing lists of links in the UI, and it automatically renders overflowed links as a pop-up on desktop or sheet on mobile. The HTML structure you posted is close, but it's the output of the UI component, and not the source HTML it needs in order to initiate. That would closer to:

<div id="mobile-dashboard-ui-links" class="ui-links" data-maxlinks="50" data-minlinks="0">
	<ul>
		<li><a href="#">Foo</a></li>
		<li><a href="#">Bar</a></li>
		<li><a href="#">Baz</a></li>
        <li><a href="#" data-more>More</a></li>
        <li><a href="#" data-cancel>Cancel</a></li>
	</ul>
</div>

Three key things to note are the use of "ui-links" class, which triggers the ui component, as well as the "More" and "Cancel" links, which are rendered only when needed by the component. The use of other classes like navigation-list or navigation-list-item is completely arbitrary. 

It's also worth noting that this can render horizontally, vertically, or both. For example, the following with a configuration of horizontal and "data-maxlinks" constraint of 2 will render a horizontal list of "Foo", "Bar", "More", where "More" opens a pop-up (or sheet if on mobile) with "Baz", "Ham", "Eggs", and "Cancel".

<div id="mobile-dashboard-ui-links" class="ui-links" data-direction="horizontal" data-maxlinks="2" data-minlinks="0">
	<ul>
		<li><a href="#">Foo</a></li>
		<li><a href="#">Bar</a></li>
		<li><a href="#">Baz</a></li>
		<li><a href="#">Ham</a></li>
		<li><a href="#">Eggs</a></li>
        <li><a href="#" data-more>More</a></li>
        <li><a href="#" data-cancel>Cancel</a></li>
	</ul>
</div>

And if the data-maxlinks and/or the horizontal space of the links takes up more space than is available on a layout (desktop or mobile) it will automatically collapse the remaining links behind "More" to show as a pop-up or sheet.

Hope this helps!

Hi Michael,

Your answer above was very helpful, but I need a bit more help.

Per your example above, I can initialize a navigation list based off static HTML which works perfectly. However, I need to be able to dynamically add links from the navigation list at runtime using javascript.  I see some documentation regarding adding new links dynamically here:
uilinks jQuery Plugin

However, it's not clear what the newLink parameter is supposed to be.  Is it a DOM element or is it an object with parameters such as the href and innerHtml?  Does your team have an example of populating navigation items using javascript?

Thank you,

Chris

I agree that parameter could use more documentation. newLink can be an anchor DOM element, jQuery selection of an anchor, or even just a string representation of an anchor. Generally, whenever the client API accepts an element of any kind, that element can be an actual DOM element, jQuery selection, or string.

So, in your example, you could dynamically append a link with:

jQuery('#mobile-dashboard-ui-links').uilinks('add', '<a href="#">New Link!</a>');

Hi Michael,

I apologize for the delayed response, I was on vacation.  I'm trying to use the uilinks method you've noted above to build out a select list but it's still not working.

Here's my html:

<div id="mobile-dashboard-ui-links" class="ui-links" data-direction="vertical" data-maxlinks="0" data-minlinks="0">
    <ul>
        <li><a href="#" data-more>Select Dashboard</a></li>
        <li><a href="#" data-cancel>Cancel</a></li>
    </ul>
</div>

I have the More and Cancel options pre-populated.  If this not okay, how do I add them at runtime?

Here's the logic of how I'm adding links:

var mobileList = $("#dashboard-widget #mobile-dashboard-ui-links.ui-links");

for(var i = 0; i < dashboardEmbed.dashboards.length; i++) {
    //dashboard has a parameter called Name
    var dashboard = dashboardEmbed.dashboards[i];
    
    //expecting this to add an option with the dashboard's Name field
    mobileList.uilinks('add', '<a href="#">'+dashboard.Name+'</a>');
}

What am I doing wrong?

Chris

Hey Chris, don't include the class as part of the selector. And if you're doing this from a widget, use $core_v2_widget.UniqueId to wrap the id and ensure uniqueness across the full page.

Hey,

Great news, removing the ui-links class from the selector did the trick.

Thank you for your help.

Chris