This is a collection of hand-picked free HTML and CSS dotted menu icon code examples from CodePen, GitHub, and other resources. The collection was updated in November 2021 and includes 4 new items.

Dotted menu icons are a common feature in modern web design. They are often used in mobile interfaces where space is at a premium. When tapped or clicked, these icons typically reveal a dropdown menu with additional navigation options.

The collection includes a variety of designs that can be used as a starting point for your own projects. Each dotted menu icon design has its own unique style and animation, so you can choose the one that best fits your website's design aesthetic.

Whether you're looking for a simple, minimalist design or something more complex and visually interesting, you're sure to find a dotted menu icon design in this collection that suits your needs.

Happy coding!

Related Articles

  1. CSS Hamburger Menu Icons

Author

  • LotCSSCom

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS More Menu Icon Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: simple-line-icons.css

Author

  • El Alemaño

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

More Button Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Aske

Links

Made with

  • HTML / CSS (SCSS)

About the code

Animated Menu Icon

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • istef

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Menu Icon Animation

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Dot Menu Dot Menu - GIF Demo

Author

  • @Grienauer

Links

Made with

  • HTML / CSS (SCSS)

About the code

Dot Menu

Three dot CSS only menu animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Dots Menu Icon Dots Menu Icon - GIF Demo

Author

  • Alex

Links

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Dots Menu Icon

Dots menu icon in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Dotted Menu Pure CSS Dotted Menu Pure CSS - GIF Demo

Author

  • Izzy Skye

Links

Made with

  • HTML / CSS (SCSS)

About the code

Dotted Menu Pure CSS

A quick and easy dotted menu icon done in pure CSS in a single element.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Dotted Menu Concept Dotted Menu Concept - GIF Demo

Author

  • Kyle Brumm

Links

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Dotted Menu Concept

Just messing around with creating a new menu icon concept.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Kevin

Links

Made with

  • HTML / CSS (SCSS)

About a code

Toggle Menu

Animated toggle menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Alex Coven

Links

Made with

  • HTML / CSS

About a code

Material More Button CSS

More info button with Material Design style. Used input:checked and a checkbox to build this, then used a tags to protect the click from unchecking the checkbox.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Three Dots Menu Animation Three Dots Menu Animation - GIF Demo

Author

  • Sébastien JEAN

Links

Made with

  • HTML / CSS

About the code

Three Dots Menu Animation

Three dots menu animation on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -