# Navigation (Nav, NavBar, Tabs, etc.) API Reference # Nav, NavBar, DowDownNav, and Tab examples * * * ## Nav See Source See Output * Option 1 * Option 2 * Option 3 [code] def ex_nav1(): mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))] return NavContainer(*mbrs1) [/code] See Source See Output * NavHeaderLi * Option 1 * Option 2 * Option 3 * Subtitle Ex NavSubtitle text to be shown * * Parent Name * Child 1 * Child 2 * Child 3 [code] def ex_nav2(): mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))] mbrs2 = [Li(A('Child 1')), Li(A('Child 2')),Li(A('Child 3'))] return NavContainer( NavHeaderLi("NavHeaderLi"), *mbrs1, Li(A(href='')(Div("Subtitle Ex",NavSubtitle("NavSubtitle text to be shown")))), NavDividerLi(), NavParentLi( A('Parent Name'), NavContainer(*mbrs2,parent=False), ), ) [/code] ## Navbars Fully responsive simple navbar using the high level API. This will collapse to a hamburger menu on mobile devices. See the Scrollspy example for a more complex navbar example. See Source See Output ### My Blog Page1Page2Page3 Page1Page2Page3 [code] def ex_navbar1(): return NavBar(A("Page1",href='/rt1'), A("Page2",href='/rt2'), A("Page3",href='/rt3'), brand=H3('My Blog')) [/code] See Source See Output Page1Page2 Page1Page2 [code] def ex_navbar2(): return NavBar( A(Input(placeholder='search')), A(UkIcon("rocket")), A('Page1',href='/rt1'), A("Page2", href='/rt3'), brand=DivLAligned(Img(src='/api_reference/logo.svg'),UkIcon('rocket',height=30,width=30))) [/code] ## Drop Down Navs See Source See Output Open DropDown * Item 1 * Item 2 [code] def ex_navdrop(): return Div( Button("Open DropDown"), DropDownNavContainer(Li(A("Item 1",href=''),Li(A("Item 2",href=''))))) [/code] ## Tabs See Source See Output * Active * Item * Item * Disabled [code] def ex_tabs2(): return Container( TabContainer( Li(A("Active",href='javascript:void(0);', cls='uk-active')), Li(A("Item",href='javascript:void(0);')), Li(A("Item",href='javascript:void(0);')), Li(A("Disabled", cls='uk-disabled')))) [/code] A tabs can use any method of navigation (htmx, or href). However, often these are use in conjunction with switchers do to this client side See Source See Output * Active * Item * Item * Disabled * # Tab 1 * # Tab 2 * # Tab 3 [code] def ex_tabs1(): return Container( TabContainer( Li(A("Active",href='#', cls='uk-active')), Li(A("Item",href='#')), Li(A("Item",href='#')), Li(A("Disabled",href='#', cls='uk-disabled')), uk_switcher='connect: #component-nav; animation: uk-animation-fade', alt=True), Ul(id="component-nav", cls="uk-switcher")( Li(H1("Tab 1")), Li(H1("Tab 2")), Li(H1("Tab 3")))) [/code] # API Docs ### NavBar Source [code] NavBar(*c, brand=h3(('Title',),{'class': 'uk-h3 '}), right_cls='items-center space-x-4', mobile_cls='space-y-4', sticky: bool = False, uk_scrollspy_nav: bool | str = False, cls='p-4', scrollspy_cls=, menu_id=None) -> fastcore.xml.FT [/code] > Creates a responsive navigation bar with mobile menu support **Params** * `c` Component for right side of navbar (Often A tag links) * `brand` Brand/logo component for left side * `right_cls` Spacing for desktop links * `mobile_cls` Spacing for mobile links * `sticky` Whether to stick to the top of the page while scrolling * `uk_scrollspy_nav` Whether to use scrollspy for navigation * `cls` Classes for navbar * `scrollspy_cls` Scrollspy class (usually ScrollspyT.*) * `menu_id` ID for menu container (used for mobile toggle) **Returns:** Responsive NavBar ### TabContainer Source [code] TabContainer(*li, cls='', alt=False, **kwargs) -> fastcore.xml.FT [/code] > A TabContainer where children will be different tabs **Params** * `li` Components * `cls` Additional classes on the `Ul` * `alt` Whether to use an alternative tab style * `kwargs` **Returns:** Tab container ### NavContainer Source [code] NavContainer(*li, cls=, parent=True, uk_nav=False, uk_scrollspy_nav=False, sticky=False, **kwargs) -> fastcore.xml.FT [/code] > Creates a navigation container (useful for creating a sidebar navigation). A Nav is a list (NavBar is something different) **Params** * `li` List items are navigation elements (Special `Li` such as `NavParentLi`, `NavDividerLi`, `NavHeaderLi`, `NavSubtitle`, `NavCloseLi` can also be used) * `cls` Additional classes on the nav * `parent` Whether this nav is a _parent_ or _sub_ nav * `uk_nav` True for default collapsible behavior, see frankenui docs for more advanced options * `uk_scrollspy_nav` Activates scrollspy linking each item `A` tags `href` to content's `id` attribute * `sticky` Whether to stick to the top of the page while scrolling * `kwargs` **Returns:** FT Component that is a list of `Li` styled for a sidebar navigation menu * * * ### NavT __ Option | Value | Option | Value ---|---|---|--- default | uk-nav-default | primary | uk-nav-primary secondary | uk-nav-secondary | | ### NavCloseLi Source [code] NavCloseLi(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a navigation list item with a close button **Params** * `c` Components * `cls` Additional classes on the li * `kwargs` **Returns:** Navigation list item with a close button ### NavSubtitle Source [code] NavSubtitle(*c, cls=, **kwargs) -> fastcore.xml.FT [/code] > Creates a navigation subtitle **Params** * `c` Components * `cls` Additional classes on the div * `kwargs` **Returns:** Navigation subtitle ### NavHeaderLi Source [code] NavHeaderLi(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a navigation list item with a header **Params** * `c` Components * `cls` Additional classes on the li * `kwargs` **Returns:** Navigation list item with a header ### NavDividerLi Source [code] NavDividerLi(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a navigation list item with a divider **Params** * `c` Components * `cls` Additional classes on the li * `kwargs` **Returns:** Navigation list item with a divider ### NavParentLi Source [code] NavParentLi(*nav_container, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a navigation list item with a parent nav for nesting **Params** * `nav_container` `NavContainer` container for a nested nav with `parent=False`) * `cls` Additional classes on the li * `kwargs` **Returns:** Navigation list item ### DropDownNavContainer Source [code] DropDownNavContainer(*li, cls=, parent=True, uk_nav=False, uk_dropdown=True, **kwargs) -> fastcore.xml.FT [/code] > A Nav that is part of a DropDown **Params** * `li` Components * `cls` Additional classes on the nav * `parent` Whether to use a parent nav * `uk_nav` True for default collapsible behavior, see https://franken-ui.dev/docs/nav#component-options for more advanced options * `uk_dropdown` Whether to use a dropdown * `kwargs` **Returns:** DropDown nav container