How Remove Bullet Points from Unordered Lists with CSS

Unordered list items (<ul>) on a web page is styled with round bullet points, by default. But what if you want to remove bullet points on list items, e.g. when building a navigation component?

The following HTML is a typical structure for a navigation/menu component on a website.

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

To remove the bullet points from your menu items, you need to override the default CSS rule list-style-type: disc; and replace it with none:

nav ul {
  list-style-type: none;
}

Note: you combine your type selectors, ul, and nav to specify that you only want to remove bullets on this specific navigation component. Otherwise, all unordered list items on your website get their bullet points removed.