ClassName type describes class selector used to style element.

All strings are sanitized to prevent missuse and odd resulting selectors. It's highly recommended to avoid spaces, __ and -- in arguments though.

Construct ClassName with given namespace.

import Html.Attributes exposing (class)


namespace "menu" |> toClass


--> class "menu"

Add element

import Html.Attributes exposing (class)


namespace "menu"
    |> add "list"
    |> toClass


--> class "menu__list"

Add new elements from list.

import Html.Attributes exposing (class)


namespace "menu"
    |> addMany ["item", "link"]
    |> toClass


--> class "menu__item--link"

Convert ClassName to Html.Attribute msg.

import Html.Attributes exposing (class)


namespace "menu"
    |> toClass
--> class "menu"


namespace "menu"
    |> add "list"
    |> toClass
--> class "menu__list"

Add new element and convert to Html.Attribute msg.

import Html.Attributes exposing (class)


namespace "menu"
    |> nest "item"
--> class "menu__item"


namespace "menu"
    |> add "item"
    |> nest "link"
--> class "menu__item--link"

Add new elements from list and convert it all to Html.Attribute msg.

import Html.Attributes exposing (class)


namespace "menu"
    |> nestMany ["item", "link"]
--> class "menu__item--link"


namespace "menu"
    |> nestMany ["item"]
--> class "menu__item"

Add state to last element ClassName and convert to Html.Attribute msg.

import Html.Attributes exposing (class)


isActive : Bool
isActive =
    True


isHighlighted : Bool
isHighlighted =
    False


namespace "menu"
    |> add "item"
    |> withStates
        [ ( "active", isActive )
        , ( "highlighted", isHighlighted )
        ]
--> class "menu__item active"


namespace "menu"
    |> withStates []
--> class "menu"