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
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
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
More Button Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Animated Menu Icon
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
CSS Menu Icon Animation
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Responsive: no
Dependencies: -


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: -


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: -


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: -


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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Toggle Menu
Animated toggle menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -


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: -