The navbar is a wrapper that positions branding, navigation, and other elements in a concise header. The navbar is designed to be responsive by default and made interactive with a tiny sprinkle of Elm.
import Bootstrap.Navbar as Navbar
-- You need to keep track of the view state for the navbar in your model
type alias Model =
{ navbarState : Navbar.State }
-- The navbar needs to know the initial window size, so the inital state for a navbar requires a command to be run by the Elm runtime
initialState : ( Model, Cmd Msg )
initialState =
let
( navbarState, navbarCmd ) =
Navbar.initialState NavbarMsg
in
( { navbarState = navbarState }, navbarCmd )
-- Define a message for the navbar
type Msg
= NavbarMsg Navbar.State
-- You need to handle navbar messages in your update function to step the navbar state forward
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
NavbarMsg state ->
( { model | navbarState = state }, Cmd.none )
view : Model -> Html Msg
view model =
Navbar.config NavbarMsg
|> Navbar.withAnimation
|> Navbar.brand [ href "#" ] [ text "Brand" ]
|> Navbar.items
[ Navbar.itemLink [ href "#" ] [ text "Item 1" ]
, Navbar.itemLink [ href "#" ] [ text "Item 2" ]
]
|> Navbar.view model.navbarState
-- If you use animations as above or you use dropdowns in your navbar you need to configure subscriptions too
subscriptions : Model -> Sub Msg
subscriptions model =
Navbar.subscriptions model.navbarState NavbarMsg
view : State -> Config msg -> Html msg
The main view function for displaying a navbar.
Navbar.config NavbarMsg
|> Navbar.withAnimation
|> Navbar.brand [ href "#" ] [ text "Brand" ]
|> Navbar.items
[ Navbar.itemLink [ href "#" ] [ text "Item 1" ]
, Navbar.itemLink [ href "#" ] [ text "Item 2" ]
]
|> Navbar.customItems
[ Navbar.textItem [] [ text "Some text" ] ]
|> Navbar.view model.navbarState
state
Required view state the navbar uses to support interactive behaviorconfig
The view configuration
that determines to look and feel of the navbarconfig : (State -> msg) -> Config msg
Creates a default navbar view configuration. Providing a starting point to set up your navbar how you'd like.
Configuration information for describing the view of the Navbar
options
List of configuration options
toMsg
Message function used for stepping the viewstate of the navbar forwardwithAnimation
Set to True if you wish the menu to slide up/down with an animation effectbrand
Optional brand
element (typically a logo)items
List of menu items that the user can select fromcustomItems
List of custom (inline) items that you may place to the right of the std. navigation itemswithAnimation : Config msg -> Config msg
Use a slide up/down animation for toggling the navbar menu when collapsed.
NOTE: Do remember to set up the subscriptions function when using this option.
primary : Config msg -> Config msg
Option to color menu using the primary color
secondary : Config msg -> Config msg
Option to color menu using the secondary color
success : Config msg -> Config msg
Option to color menu using the success color
info : Config msg -> Config msg
Option to color menu using the info color
warning : Config msg -> Config msg
Option to color menu using the warning color
danger : Config msg -> Config msg
Option to color menu using the danger color
light : Config msg -> Config msg
Use a light background color (with a dark text)
dark : Config msg -> Config msg
Use a dark background color (with a light text)
fixTop : Config msg -> Config msg
Option to fix the menu to the top of the viewport
Note: You probably need to add some margin-top to the content element following the navbar when using this option
fixBottom : Config msg -> Config msg
Option to fix the menu to the bottom of the viewport
lightCustom : Color -> Config msg -> Config msg
Option to color menu using a light custom background color (see avh4/elm-color)
darkCustom : Color -> Config msg -> Config msg
Option to color menu using a dark custom background color (see avh4/elm-color)
lightCustomClass : String -> Config msg -> Config msg
Option to color menu using a light custom background color defined by css class(es)
darkCustomClass : String -> Config msg -> Config msg
Option to color menu using a dark custom background color defined by css class(es)
collapseSmall : Config msg -> Config msg
Collapse the menu at the small media breakpoint
collapseMedium : Config msg -> Config msg
Collapse the menu at the medium media breakpoint
collapseLarge : Config msg -> Config msg
Collapse the menu at the large media breakpoint
collapseExtraLarge : Config msg -> Config msg
Collapse the menu at the extra large media breakpoint
container : Config msg -> Config msg
Use this option when you want a fixed width menu (typically because your main content is also configured to be fixed width)
attrs : List (Html.Attribute msg) -> Config msg -> Config msg
Add a custom Html.Attribute to the navbar element using this function
brand : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a brand element for your navbar
Navbar.brand
[ href "#" ]
-- (and perhaps use onWithOptions for custom handling of clicks !)
[ img [ src "assets/logo.svg" ] [ text "MyCompany" ] ]
config
attributes
List of attributeschildren
List of childrenconfig
Navbar config record to add/modify brand forOpaque type representing a brand element
items : List (Item msg) -> Config msg -> Config msg
Configure your navbar with a list of navigation links and/or dropdowns.
NOTE If you call this function several times, the last time "wins".
itemLink : List (Html.Attribute msg) -> List (Html msg) -> Item msg
Create a menu item (as an a
element)
attributes
List of attributeschildren
List of childrenitemLinkActive : List (Html.Attribute msg) -> List (Html msg) -> Item msg
Create a menu item that is styled as active (as an a
element)
attributes
List of attributeschildren
List of childrenOpaque type representing a selectable menu item
dropdown : { id : String, toggle : DropdownToggle msg, items : List (DropdownItem msg) } -> Item msg
Create a dropdown menu for use in a navbar
config
A record with the following propertiesid
A unique id for your dropdown. It's important, because it's used to keep track of the state of the dropdown!toggle
The main item (toggle
) that toggles the dropdown menu up or downitems
List of menu items for the dropdowndropdownToggle : List (Html.Attribute msg) -> List (Html msg) -> DropdownToggle msg
Function to construct a toggle for a dropdown
dropdownItem : List (Html.Attribute msg) -> List (Html msg) -> DropdownItem msg
Creates an a
element appropriate for use in a nav dropdown
attributes
List of attributeschildren
List of child elementsdropdownDivider : DropdownItem msg
Creates a divider element appropriate for use in dropdowns. Handy when you want to visually separate groups of menu items in a dropdown menu
dropdownHeader : List (Html msg) -> DropdownItem msg
Creates an header element appropriate for use in dropdowns. Handy when you want to provide a heading for a group of menu items in a dropdown menu
children
List of child elementsOpaque type representing the toggle element for a dropdown menu
Opaque type representing an item in a dropdown menu
customItems : List (CustomItem msg) -> Config msg -> Config msg
You can add custom items to a navbar too. These are placed after any navigation items.
NOTE If you call this function several times, the last time "wins".
textItem : List (Html.Attribute msg) -> List (Html msg) -> CustomItem msg
Create a custom inline text element, which will float to the right when the menu isn't collapsed
attributes
List of attributeschildren
List of childrenNote: If you have multiple custom items you will need to provide spacing between them yourself
formItem : List (Html.Attribute msg) -> List (Html msg) -> CustomItem msg
Create a custom inline form element, which will float to the right when the menu isn't collapsed
Navbar.formItem []
[ TextInput.text
[ TextInput.small ]
, Button.button
[ Button.roleSuccess, Button.small]
[ text "Submit"]]
]
attributes
List of attributeschildren
List of childrenNote: If you have multiple custom items you will need to provide spacing between them yourself
customItem : Html msg -> CustomItem msg
Create a completely custom item, which will float to the right when the menu isn't collapsed. You should ensure that you create inline elements or else your menu will break in unfortunate ways!
attributes
List of attributeschildren
List of childrenNote: If you have multiple custom items you will need to provide spacing between them yourself
Opaque type representing a custom (inline) navbar item
initialState : (State -> msg) -> ( State, Platform.Cmd.Cmd msg )
You need to call this function to initialize the view state for the navbar and store the state in your main model.
init : ( Model, Cmd Msg )
init =
let
( navbarState, navCmd ) =
Navbar.initialState NavbarMsg
in
( { navbarState = navbarState }
, navCmd
)
The Cmd part is needed, because the navbar as implemented currently needs the window size. Hopefully a smoother solution can be devised in the future.
Opaque type representing the view state of the navbar and any navbar dropdown menus
subscriptions : State -> (State -> msg) -> Platform.Sub.Sub msg
To support animations and managing the state of dropdown you need to wire up this function in your main subscriptions function.
subscriptions : Model -> Sub Msg
subscriptions model =
Navbar.subscriptions model.navbarState NavbarMsg
Note: If you are NOT using dropdowns in your navbar AND you are using a navbar without animation you can skip this. But it's not that much work, so maybe you are better off doing it anyway.