Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 2)

Menus

Other navigation

Related links and Arrowed list style

Use the select boxes below to see the available configurations for the Related links menu and te Arrowed list style menu.

Code


<!-- Use below code for Related Links Menu -->
<nav aria-labelledby="{{ Header ID }} "">
	<!-- Any heading tag may be used as long as the class `group-list-title"` is used -->
	<h3 class="group-list-title" id="{{ Header ID }}>Related links</h3>
	<ul class="cui list-widget">
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
	</ul>
</nav>

<!-- Use below code for Arrowed Links Menu with link -->
<nav aria-labelledby="{{ Header ID }} class="cui list-widget">
	<!-- Any heading tag may be used as long as the class `group-list-title"` is used -->
	<h3 class="group-title" id="{{ Header ID }}>
		<a class="group-title" href="{{ URL }}">
		<!-- Optional Icon code -->
		<span class="{{ Icon Class Name }}" aria-hidden="true"></span>
		<!-- Optional Icon code end -->
		<span class="group-title-text">{{ Menu header name }}</span>
		<!-- Optional link description code -->
		<span class="group-title-desc">Example optional description of the link above.</span>
		<!-- Optional link description code end -->
		</a>
	</h3>
	<ul class="cui list-widget group-links arrowed">
		<!-- If the first list item is the most important, a <strong> tag may be used to bold it. Only the first list item may be bolded. -->
		<li> <strong> <a href="{{ URL }}">{{ Link text }}</a> </strong> </li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
	</ul>
</nav>

<!-- Use below code for Arrowed Links Menu without link -->
<nav aria-labelledby="{{ Header ID }} class="cui list-widget">
	<!-- Any heading tag may be used as long as the class `group-list-title"` is used -->
	<h3 class="group-title" id="{{ Header ID }}">
		<!-- Optional Icon code -->
		<span class="{{ Icon Class Name }}" aria-hidden="true"></span>
		<!-- Optional Icon code end -->
		<span class="group-title-text">{{ Menu header name }}</span>
	</h3>
	<ul class="cui list-widget group-links arrowed">
		<!-- If the first list item is the most important, a <strong> tag may be used to bold it. Only the first list item may be bolded. -->
		<li> <strong> <a href="{{ URL }}">{{ Link text }}</a> </strong> </li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
		<li><a href="{{ URL }}">{{ Link text }}</a></li>
	</ul>
</nav>