ul>li
for the structurearia-current="true"
to the parent of the current pageul>li
structurecompactGroup
view : Config route msg -> List (NavAttribute msg) -> List (Entry route msg) -> Accessibility.Styled.Html msg
{ isCurrentRoute : route -> Basics.Bool
, routeToString : route -> String
, onSkipNav : msg
}
collapsible : CollapsibleConfig msg -> NavAttribute msg
{ isOpen : Basics.Bool
, toggle : Basics.Bool -> msg
, isTooltipOpen : Basics.Bool
, toggleTooltip : Basics.Bool -> msg
}
navLabel : String -> NavAttribute msg
Give screenreader users context on what this particular sidenav is for.
If the nav is collapsible, this value will also be used for the sidenav tooltips.
navId : String -> NavAttribute msg
navCss : List Css.Style -> NavAttribute msg
These styles are included automatically in the nav container:
[ flexBasis (px 300)
, flexShrink (num 0)
, borderRadius (px 8)
, backgroundColor Colors.gray96
, padding (px 20)
, marginRight (px 20)
]
navNotMobileCss : List Css.Style -> NavAttribute msg
navMobileCss : List Css.Style -> NavAttribute msg
navQuizEngineMobileCss : List Css.Style -> NavAttribute msg
entry : String -> List (EntryAttribute route msg) -> Entry route msg
entryWithChildren : String -> List (EntryAttribute route msg) -> List (Entry route msg) -> Entry route msg
html : List (Accessibility.Styled.Html msg) -> Entry route msg
compactGroup : String -> List GroupAttribute -> List (Entry route msg) -> Entry route msg
Add a labelled "group" of entries, typically taking the form of plain links.
SideNav.compactGroup "Resources"
[]
[ SideNav.entry "Docs" [ SideNav.linkExternal "www.docs.com" ]
, SideNav.entry "Examples" [ SideNav.linkExternal "www.examples.com" ]
, SideNav.entry "Google" [ SideNav.linkExternal "www.google.com" ]
]
Use entry
to create a sidebar entry.
Attribute (EntrySpecificConfic route msg) msg
Attribute {} Basics.Never
icon : Nri.Ui.Svg.V1.Svg -> Attribute entryOrGroup msg
rightIcon : Nri.Ui.Svg.V1.Svg -> Attribute entryOrGroup msg
custom : List (Html.Styled.Attribute msg) -> Attribute entryOrGroup msg
Use this helper to add custom attributes.
Do NOT use this helper to add css styles, as they may not be applied the way
you want/expect if underlying styles change.
Instead, please use the css
helper.
css : List Css.Style -> Attribute entryOrGroup msg
nriDescription : String -> Attribute entryOrGroup msg
testId : String -> Attribute entryOrGroup msg
id : String -> Attribute entryOrGroup msg
onClick : msg -> EntryAttribute route msg
href : route -> EntryAttribute route msg
linkSpa : route -> EntryAttribute route msg
Use this link for routing within a single page app.
This will make a normal tag, but change the Events.onClick behavior to avoid reloading the page.
See https://github.com/elm-lang/html/issues/110 for details on this implementation.
linkExternal : String -> EntryAttribute route msg
linkWithMethod : { method : String, url : route } -> EntryAttribute route msg
linkWithTracking : { track : msg, url : route } -> EntryAttribute route msg
linkExternalWithTracking : { track : msg, url : String } -> EntryAttribute route msg
premiumDisplay : Nri.Ui.Data.PremiumDisplay.PremiumDisplay -> msg -> EntryAttribute route msg