Menu icon Foundation
Foundation 6 Dropdown Arrows

Does anyone know how to remove the little arrow beside the a tag in a Foundation 6 drop down menu? All I can find is how to get rid of it in Foundation 5 with CSS, but 6 uses different classes for the drop down menus.

foundation 6drop down

Does anyone know how to remove the little arrow beside the a tag in a Foundation 6 drop down menu? All I can find is how to get rid of it in Foundation 5 with CSS, but 6 uses different classes for the drop down menus.

Rafi Benkual over 3 years ago

There is a Sass variable for this $dropdownmenu-arrows that you can set to false if you'd like.

Nark over 3 years ago

Sorry, but I'm just using the core files and would rather do it using CSS if possible.

Loren Heisey over 3 years ago

For dropdown menus use the following overrides to not show the arrows:

  .dropdown.menu .is-dropdown-submenu-parent.is-down-arrow > a::after {
    content: none; }

  .dropdown.menu .is-dropdown-submenu-parent.is-left-arrow > a::after {
    content: none; }

  .dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after {
    content: none; }

Thomas Black over 3 years ago

To disable the arrows on the non-menu version of the Foundation 6 dropdown you can use the following: 

button { background-image:none !important; }