Radial menu and radial list

A pure CSS library to inline lists and menus around a circle, flexible and customizable.

© 2020 Fabio Vitali (fabio.vitali@unibo.it)

Introduction

A radial layout organizes a list of items in a circle around a central element called pivot. Radial lists always show the items around the pivot, while radial menus use the pivot as a clickable toggle button to show and hide the items. Both lists and menus can be placed inline next to the boxes of other elements and text strings. Both the central pivot and the individual items can contain icons, text and labels, and can be hypertext links.

Showcase

Download

Documentation

All features of a radial layout are managed through CSS, and several utility classes are available to simplify the set up. Markup elements in most cases can be equivalently DIVs, SPANs or UL/LIs with no loss of functionality. In this documentation I will use DIV mostly, but you can play around with other elements.

Designers can place any content inside the central element (the pivot) and in any of the individual radial items, and can control the position, the size, and the distance of the individual radial items, as well as the speed and delay with which they appear when the central pivot is clicked.

All elements of a radial menu are placed within a DIV with class "radial". A radial list has two required elements inside, while a radial menu has three elements (adding a checkbox input element that toggles the menu).

Radial layout

The radial layout is activated by assigning class radial to a container:

<div class="radial"> ... </div>

List vs. menu

A radial list (all items are always shown) is specified by assigning class list to the radial container. It must only contain the pivot and the list:

<div class="radial list">
		<div class="radialPivot">...</div>
		<div class="radialList" role="navigation" aria-label="menu items"> ... </div>
</div>

A radial menu (items are shown when the pivot is clicked) is specified by by assigning class menu to the radial container. The container must start with a checkbox, and the pivot must be a label associated to the checkbox (through the for attribute).

<div class="radial menu">
		<input type="checkbox" id="someId">
		<label class="radialPivot" for="someId">...</label>
		<div class="radialList" role="navigation" aria-label="menu items"> ... </div>
</div>

Automatic positioning: clock vs. compass

Positioning the list items around a circle is defined by the angle between the vertical axis and the axis connecting the item to the pivot. There are two automatic position systems, called clock (up to 12 positions in clockwise order, called 12, 1, 2, ..., 11) and compass (up to 16 positions in clockwise order, called North, North-northeast, Northeast, East-Northeast, East, ..., North-Northwest). It is not necessary to fill in all available slots, as the automatic positioning will stop after having dealt with all the items in the list. Items are organized automatically in the corresponding position system by assigning class clock or compass to the radialList container:

Manual positioning: helper classes

Positioning items can also be done individually by adding one of the available helper classes.

• p1, p2, p3, ..., p12 are used to position the element in the corresponding position of the clock layout. You can also use the equivalent classes clock1, clock2, clock3, ..., clock12.
• pN, pNNE, pNE, ..., pNNW are used to position the element in the corresponding position of the compass layout. You can also use the equivalent classes compass1, compass2, compass3, ..., compass16.

Dimensional settings

Two settings control the radius of the circle and the overall size of the pivot and of the individual elements.

• Classes radius1, radius2, radius3, ..., radius10 set the radius of the circle around which the items are positioned. Each class corresponds to a 1 rem increment farther away from the position of the pivot. You can also change the radius yourself by modifying the variable --radius.
• Classes size0, size1, size3, ..., size9 set the size of the (rectangular) icon that represents both the pivot as well as the individual list items of the radial menu. The content of these icons can overflow out of them, but their size is used to determine distances and relative positions of all the elements of the radial menu. Each size corresponds to a 0.25 rem increment from 0.75 to 3.00 rem overall. You can also set the icon size yourself by modifying the variable --icon-size.

Animation

The creation of the circular menu is controlled by an animation that takes care of the speed and the delay of the movement of the list items. There are three families of classes that are involved in the animation:

• Classes delay0, delay1, delay2, ..., delay10 set the delay of the animation, i.e., the amount of time from the click event to the beginning of the transition. Each class corresponds to an increment of 0.1 seconds from delay0, which executes the transition immediately. There is an additional class, delay05, which sets the delay at 0.05 seconds. You can also change the radius yourself by modifying the variable --radial-delay.
• Classes speed0, speed1, speed2, ..., speed10 set the speed of the animation, i.e., the amount of time from the beginning to the end of the transition. Each class corresponds to an increment of 0.1 seconds from speed0, which executes the transition instantaneously. There is an additional class, speed05, which sets the speed at 0.05 seconds. You can also change the radius yourself by modifying the variable --radial-speed.
• Classes d0, d1, d2, ..., d16 set the order of the animation, i.e., the sequence of the individual items in initiating the transition. You can also change the order yourself by modifying the variable --delay.

Additional helpers

To further style the radial menu, a few additional classes are available:

• The class displace can be used to place a part of the list item, e.g. a label, along the same axis of the overall item's icon, so that it sits above the icon in position North, right of the icon in position East, below the icon in position South, left of the icon in position West, and at the appropriate angles in intermediate positions. Use text alignment classes tl (left), tc (center) and tr (right) to further emphasize alignment with the appropriate axis.
• The class icon gives a circular shape to an icon, applicable to both the pivot and each individual list item. You can also specify a text color (variable --color), and a background-color (variable --background-color).
• The class sronly is meant for screen readers and accessibility support. Elements in this class will not impact the overall layout of any part of the menu, while still being available and presented for accessibility purposes through screen readers
• Classes clear, clearRight and clearLeft are used to clear space around the pivot to make room for the list items. It is possible to clear both sides (class clear), the right side (class clearRight) or the left side (class clearLeft). Clearing above and below the pivot is not supported at the moment.