Styling toolbars

Some styling can be done by passing custom class names to the toolbar constructor or toolbar action and writing custom CSS for those classes. With a little knowledge of how Leaflet.Toolbar styles toolbars by default, you can do some fancier styling.

Toolbars

Leaflet.Toolbars are nested hierarchically.

The top level toolbar contains actions that are immediately visible to the user. Each of these actions may contain a menu of secondary actions, which is represented as a separate toolbar nested inside the first. Toolbars are given a class leaflet-toolbar-n, where n is the 0-based depth of the toolbar in the toolbar hierarchy.

Leaflet.Toolbar provides default styles for control-style and popup-style toolbars via leaflet-toolbar-0 and leaflet-toolbar-1. If you want to customize the style of all toolbars at a given level of the hierarchy, you can simply override the styles for these classes with your own.

Actions

Toolbars are expressed in HTML as <ul>'s. Each toolbar action corresponds to a <li> containing an <a> element. The <a> element is given the leaflet-toolbar-icon class, and the default styling is applied to this class.