A navigation thingy. The first list of attributes is for a nav.breadcrumb tag. The second is for an inner ul tag.

type Msg
    = GoHome
    | GoAway
    | GoTeam


myBreadCrumb : Html Msg
myBreadCrumb =
    breadcrumb breadcrumbModifiers
        []
        []
        [ crumblet False [] [ onClick GoHome ]
        , crumblet False [] [ onClick GoAway ]
        , crumblet False [] [ onClick GoTeam ]
        , crumblet True [] []
        ]

A convenience element for breadcrumb. The first attribute list applies to the outer li tag. The second attribute list applies to the inner a tag.

The card component comprises several elements that you can mix and match. card is the main container for the card-partitions.

myCard : Html msg
myCard =
    card []
        [ cardImage [] []
        , cardContent [] []
        ]

A horizontal bar with a shadow.

myCardHeader : Html msg
myCardHeader =
    cardHeader []
        [ cardTitle []
            [ text "Queen of Hearts"
            ]
        , cardIcon []
            [ icon Standard
                []
                [ heart_o
                ]
            ]
        ]

type Msg
    = ShowCard


myIcon : Html msg
myIcon =
    icon Standard [] [ diamond ]


myCardHeader : Html Msg
myCardHeader =
    easyCardHeader []
        { title = [ text "4 of Diamonds" ]
        , icon = [ myIcon ]
        , onClickIcon = ShowCard
        }

import B.Elements exposing (image, imageModifiers)


myImage : Html msg
myImage =
    image imageModifiers
        []
        [ img [ src "http://i.imgur.com/LcvP04R.gif" ] []
        ]


myCardImage : Html msg
myCardImage =
    cardImage [] [ myImage ]

myCardFooter : Html msg
myCardFooter =
    cardFooter []
        [ cardFooterItemLink [] [ text "Save" ]
        , cardFooterItemLink [] [ text "Edit" ]
        , cardFooterItemLink [] [ text "Delete" ]
        ]

type Msg
    = ToggleMenu


myDropdownTrigger : Html Msg
myDropdownTrigger =
    dropdownTrigger []
        [ button buttonModifiers
            [ onClick ToggleMenu
            , attribute "aria-haspopup" "true"
            , attribute "aria-controls" "dropdown-menu"
            ]
            [ text "Toggle Me"
            ]
        ]


myDropdownMenu : Html Msg
myDropdownMenu =
    dropdownMenu []
        []
        [ dropdownItem False [] [ text "Cool Birds" ]
        , dropdownDivider [] []
        , dropdownItemLink False [ href "#duck" ] [ text "Duck" ]
        , dropdownItemLink False [ href "#duck" ] [ text "Duck" ]
        , dropdownItemLink True [ href "#goose" ] [ text "Goose" ]
        ]


myDropdown : Bool -> Html Msg
myDropdown isMenuOpen =
    dropdown isMenuOpen
        dropdownModifiers
        []
        [ myDropdownTrigger
        , myDropdownMenu
        ]

A hoverable variant of dropdown.

The container for the button/link that activates the dropdown menu.

The container for the dropdown's items. The first attributes list is for the outer div.dropdown-menu. The inner list is for the dropdown-content.

A synonym for div.dropdown-item.is-active.

A synonym for a.dropdown-item.is-active.

An empty hr.dropdown-divider element.

Simple menus for vertical navigation.

myMenu : Html msg
myMenu =
    menu []
        [ menuLabel [] [ text "General" ]
        , menuList []
            [ menuListItemLink False [] [ text "Dashboard" ]
            , menuListItemLink False [] [ text "Customers" ]
            ]
        , menuLabel [] [ text "Administration" ]
        , menuList []
            [ menuListItem []
                [ menuListItemLink False [] [ text "Team Settings" ]
                ]
            , menuListItem []
                [ menuListItemLink True [] [ text "Manage Your Team" ]
                , menuList []
                    [ menuListItemLink False [] [ text "Members" ]
                    ]
                ]
            ]
        ]

myMessage : Html msg
myMessage =
    message myMessageModifiers
        []
        [ messageHeader []
            [ p [] [ text "hello" ]
            ]
        , messageBody []
            [ text "lorem ipsum"
            ]
        ]

myModal : Html msg
myModal =
    modal True
        []
        [ modalBackground [] []
        , modalContent []
            [ text "Anything can go here!"
            ]
        , modalClose Large [] []
        ]

type Msg
    = CloseModal


myModal : Html Msg
myModal =
    easyModal True
        []
        CloseModal
        [ text "Your content goes here."
        ]

myNavbarBurger : Html Msg
myNavbarBurger =
    navbarBurger isMenuOpen
        []
        [ span [] []
        , span [] []
        , span [] []
        ]


myNavbarLink : Html Msg
myNavbarLink =
    navbarLink []
        [ text "More Junk"
        ]


myNavbar : Bool -> Bool -> Html Msg
myNavbar isMenuOpen isMenuDropdownOpen =
    navbar navbarModifiers
        []
        [ navbarBrand []
            myNavbarBurger
            [ navbarItem False
                []
                [ img [ src "https://B.io/images/bulma-logo.png" ] []
                ]
            ]
        , navbarMenu isMenuOpen
            []
            [ navbarStart []
                [ navbarItemLink False [] [ text "Home" ]
                , navbarItemLink False [] [ text "Blog" ]
                , navbarItemLink True [] [ text "Carrots" ]
                , navbarItemLink False [] [ text "About" ]
                ]
            , navbarEnd []
                [ navbarItemDropdown isMenuDropdownOpen
                    Down
                    []
                    myNavbarLink
                    [ navbarDropdown False
                        Left
                        []
                        [ navbarItemLink False [] [ text "Crud" ]
                        , navbarItemLink False [] [ text "Detritus" ]
                        , navbarItemLink True [] [ text "Refuse" ]
                        , navbarItemLink False [] [ text "Trash" ]
                        ]
                    ]
                ]
            ]
        ]

A sticky variant of navbar. Remember to change your root <html> tag to <html class="has-navbar-fixed-top"> or <html class="has-navbar-fixed-bottom">.

This is a child of navbar, and a sibling to navbarBrand. This element stays to the left side of the navbar. This section is always visible, so try not to place too many links in here -- they'll overflow past the right side of the screen on mobile devices.

This is a child of navbar, and a sibling to navbarBrand. On small screens, passing True to navbarMenu will show the mobile-device menu. Its third argument should be [ navbarStart [] [], navbarEnd [] [] ].

This element is a child of navbarMenu. On normal screens, this section will appear on the left of the navbar.

This element is a child of navbarMenu. On normal screens, this section will appear on the left of the navbar.

This is a little hamburger menu icon that only appears on mobile devices, when placed in a navbarBrand. Place empty span elements inside to add/subtract numbers of lines. When its first argument is True, it transforms into a navbarCross.

myNavbarBurger : Bool -> Html Msg
myNavbarBurger isMenuOpen =
    navbarBurger isMenuOpen
        []
        [ span [] []
        , span [] []
        , span [] []
        ]

A simple "X" character; the active version of navbarBurger.

This is a synonym for div.navbar-item. You can use this element in navbarStart, navbarEnd, navbarBrand, and navbarDropdown.

This is a synonym for a.navbar-item. You can use this element in navbarStart, navbarEnd, navbarBrand, and navbarDropdown. When the first argument is True, the link will be highlighted.

This element represents a.navbar-link.is-arrowless. It is only useful as a child of navbarDropdown.

A tiny 'lil hr.navbar-divider.

This is a dropdown item that expects navbarLink and navbarDropdown tags. When the first argument is True the menu contents will be visible. The second argument determines which way its child dropdown opens vertically. You can use this element in navbarStart, navbarEnd, navbarBrand, and navbarDropdown.

A hoverable variant of navbarItemDropdown.

This is a div.navbar-dropdown element. It is intended to be a child of navbarItemDropdown. When its first argument is True, it will add a border on the top of the menu. This is most useful when you're using a transparent menu. Its second argument determines which side of the button the menu aligns with.

This element represents a.navbar-link. It is only useful as a child of navbarDropdown.

myPagination : Html msg
myPagination
  = pagination Left []
    [ paginationPrev [] [ text "Previous" ]
    , paginationNext [] [ text "Next"     ]
    , paginationList []
      [ paginationLink False [] [ text "1"  ]
      , paginationEllipsis   [] [           ]
      , paginationLink False [] [ text "45" ]
      , paginationLink True  [] [ text "46" ]
      , paginationLink False [] [ text "47" ]
      , paginationEllipsis   [] [           ]
      , paginationLink False [] [ text "83" ]
      ]

A rounded variant of pagination.

myPanel : Html msg
myPanel =
    panel []
        [ panelHeading [] [ text "Repositories" ]
        , panelBlock False
            []
            [ controlInput controlInputModifiers [] [] []
            ]
        , panelTabs []
            [ panelTab False [] [ text "all" ]
            , panelTab True [] [ text "public" ]
            , panelTab True [] [ text "private" ]
            ]
        , panelLink False [] [ text "bulma" ]
        , panelLink False [] [ text "marksheet" ]
        , panelLink True [] [ text "test" ]
        , panelLink False [] [ text "horsin" ]
        ]

myPanelBlockAttrs : List (Attribute msg)
myPanelBlockAttrs =
    []


myPanelIconAttrs : List (Attribute msg)
myPanelIconAttrs =
    []


myPanelLink : Html msg
myPanelLink =
    panelLinkWithIcon False
        myPanelBlockAttrs
        myPanelIconAttrs
        [ B.Elements.Icon.book ]
        [ text "github.com/evancz" ]

myPanelBlockAttrs : List (Attribute msg)
myPanelBlockAttrs =
    []


myPanelCheckboxInputAttrs : List (Attribute msg)
myPanelCheckboxInputAttrs =
    [ onClick ToggleThing ]


myPanelLink : Html msg
myPanelLink =
    panelLinkWithIcon False
        myPanelBlockAttrs
        myPanelCheckboxInputAttrs
        [ text "Remember Me" ]

myTabs : Html msg
myTabs =
    tabs myTabsModifiers
        []
        []
        [ tab False [] [] [ text "Pictures" ]
        , tab False [] [] [ text "Music" ]
        , tab True [] [] [ text "Videos" ]
        , tab False [] [] [ text "Docs" ]
        ]