Item List Styling

The Item List element is a navigation menu made of several links. These links may be displayed horizontally or vertically.

This element can be broken down into two parts, which can be styled individually. You have the option to style the element container using the “Root” option (for example, the Root size or fill) as well as setting the style of the links in this container: their font, fill, etc. This element can be edited on both the Project Style Level and Element Style Level.

#	Option	Function	Available in Project or Element
1	Root	This option enables you to set general properties that affect the Item List element as a whole.
2	Item	The Item option allows you to style the links inside the Item List.

1. Root

The Root option enables you to set general properties that affect the element as a whole, such as fill, size, position, and alignment.

#	Option	Function	Available in Project or Element
1	Fill	This option allows you to set a background color (solid or gradient), or image to the Item List element. You can select colors from a color pallet or specify HEX color codes.
2	Position	You can use this option to change the Item List’s location in the content area on the x and y-axis (left/right/top/bottom). The position also allows you to make the Item List float over its parent container or over the entire page. Float over Parent allows you to set the location of the Item List within the box containing it, for instance, a container or strip. Float over Page allows you to set the location of the Item List inside of the entire page (and have it stay in the same location even when the user is scrolling in it).
3	Size	This option allows you to change the width and height of the Item List container.
4	Padding	The padding option allows you to control the space between the Item List’s container border and the items in it.
5	Alignment	This allows you to set the Item List’s vertical position (top/middle/bottom) or horizontal position (left/center/right) in relation to its parent container (which can be a container/column/strip). It also allows you to set the position of a few elements in relation to each other.
6	Border	The Border option refers to the outer contour of the Item List container. It allows you to make the contour visible or invisible, and change its thickness (width), color, corner radius, and more.
7	Shadow	You can add single or multiple shadow layers to the inner and outer contours of the Item List container with the Shadow option.
8	User CSS	Cascading Style Sheets (CSS) allows a user to apply styles on the Item List element with CSS code. Note: For Project styling, CSS is accessed via the Tools menu, which you can read about in our Style Elements Using User CSS article.

2. Item

This option allows you to style the links in the item list, for example: their fonts, fill, or border.

Since this is an interactive element, it is recommended to give end users an indication of when they are hovering over an item or clicking on it. For this reason, Titan provides three states under the Item styling: Default, Hover, and Clicked.

Default refers to the basic state of an active item when it is not hovered upon or clicked but simply visible, while Hover is the state of the item once the user hovers over it with the mouse. Clicked refers to the state of the item when the user clicks on it. You can create an effect for the item by setting different values in these three states.

#	Option	Function	Available in Project or Element
1	Font	This option allows you to change the typography style, for instance, font family, bold, color, italics, and text size, etc.
2	Fill	The Fill option allows you to set a background color (solid or gradient), or background image for the items. You can select the color from a color pallet or specify a HEX color code.
3	Size	This option allows you to change the width and height of the Items.
4	Padding	The padding option allows you to control the space between the Item List’s container border and the content inside of it.
5	Border	The Border option refers to the outer contour of the Items. It allows you to make this contour visible or invisible or change its thickness (width), color, corner radius, and more.
6	Shadow	You can add single or multiple shadow layers to the inner and outer contours of the Items with the Shadow option.
7	User CSS	Cascading Style Sheets (CSS) allows a user to apply styles to the Items in your list with CSS code. Note: For Project styling, CSS is accessed via the Tools menu, which you can read about in our Style Elements Using User CSS article.