home
No code to 
<know code>

Lists

Ordered and unordered lists in Webflow

There are 2 types of lists

With Webflow this is easy.

Webflow > ELements (A) > Layout > Basic > List

webflow list UI

When you add a list you can choose ordered or unordered and you can choose to have bullets or not.

webflow list setting UI

Here's the code for an unordered list

<ul>
<li>ordered lists, which are numbered 1,2,3...</li>
<li>unordered lists, which can have bullet points, or not. </li>
</ul>

Let's look at the HTML here.

<ul> is the start of the unordered list.
<li> is the list item


Here's an ordered list:

  1. This is point one
  2. This is point two

And here's the code:

<ol>
<li>This is point one</li>
<li>This is point two</li>
</ol>

<ol> is the start of an ordered list.

List navigation menu

It's good accessibility practice to make navigation menus from a list.
Here's the menu for this website:

<ul class="main-menu w-list-unstyled">
<li><a href="/">About</a></li>
<li><a href="mailto:jonathan@sebacic.co.uk?subject=no%20code%20to%20know%20code">Contact</a></li>
</ul>

Notice the class of the <ul> is "unstyled" so there are no bullet points.

Also, this list is horizontal! 

That's just using Display > Flex and Direction > Horizontal