Menu

Not to be confused with the main navigation, the ts-menu is simply a list of selectable items.

Assign data-ts="Menu" to a menu element to initialize it as a Menu. Use li elements to separate the menu items, all of which follows the structure of a Button.

    •  
    <menu data-ts="Menu">
	<li>
		<button>
			<span>Item One</span>
			<i class="ts-icon-rating"></i>
		</button>
	</li>
	<li>
		<button>
			<span>Item Two</span>
			<i class="ts-icon-rating"></i>
		</button>
	</li>
	<li>
		<button>
			<span>Item Three</span>
			<i class="ts-icon-rating"></i>
		</button>
	</li>
</menu>

    Adding Icons

    The markup follows the convention for buttons. Use a span and an i element to seperate text and icon, simply reverse the two to make the icon go first.

    •  
    <menu data-ts="Menu">
	<li>
		<button>
			<span>I have an icon on my right</span>
			<i class="ts-icon-rating"></i>
		</button>
	</li>
	<li>
		<button>
			<i class="ts-icon-rating"></i>
			<span>I have an icon on my left</span>
		</button>
	</li>
</menu>

    Using the second line/sub text

    To add a second line to the Menu item, just add a sub with some text in it.

    •  
    <menu data-ts="Menu">
	<li>
		<button>
			<span>I'm the first line</span>
			<sub>I'm the second line</sub>
		</button>
	</li>
</menu>

    Select one

    To create a single select menu, mark one (and only one) li with the ts-checked classname and use the ts-icon-checked classname for the icon (i element)

    •  
    <menu data-ts="Menu">
	<li class="ts-checked">
		<button>
			<span>Selected</span>
			<i class="ts-icon-checked"></i>
		</button>
	</li>
	<li>
		<button>
			<span>Not selected</span>
		</button>
	</li>
</menu>

    Select many

    To create a multi select menu, simply add more classnames and icons.

    •  
    <menu data-ts="Menu">
	<li class="ts-checked">
		<button>
			<span>Selected</span>
			<i class="ts-icon-checked"></i>
		</button>
	</li>
	<li class="ts-checked">
		<button>
			<span>Also Selected</span>
			<i class="ts-icon-checked"></i>
		</button>
	</li>
</menu>

    The UI component makes no attempt to automatically manage these icons and classnames whenever a new menu item gets selected.

    Disabled items

    You can mark any selection as readonly by adding the disabled attribute to the individual buttons.

    •  
    <menu data-ts="Menu">
	<li>
		<button disabled>
			<span>Not selected</span>
		</button>
	</li>
	<li>
		<button disabled>
			<span>Not selected</span>
		</button>
	</li>
	<li class="ts-checked">
		<button disabled>
			<span>Selected</span>
			<i class="ts-icon-checked"></i>
		</button>
	</li>
</menu>