The TopNav component is used to create a top navigation.
Items inside the NavContentToggle will be availble inside the collapsible menu on smaller screens. Items inside NavContent will be visible on smaller screens as well.
import live-web.dom
import live-web-view.navigationstatic any[] use = [TopNav]TopNav{ position: 'static'
NavContent{
NavBrand{ A{ href: `#` T`Brand` } }
NavToggleButton{}
}
NavContentToggle{
Ul{
Li{ A{ href: `#` T`Home` } }
Li{ A{ href: `#` T`Install` } }
Li{ A{ href: `#` T`Documentation` } }
}
}
}Items inside the NavContentWide will be invisible on smaller screens.
import live-web.dom
import live-web-view.navigationstatic any[] use = [TopNav]TopNav{ position: 'static'
NavContent{
NavBrand{ A{ href: `#` T`Brand` } }
NavToggleButton{}
}
NavContentWide{
Ul{
Li{ A{ href: '#' T`Wide Screen Link` }}
}
}
NavContentToggle{
Ul{
Li{ A{ href: `#` T`Home` } }
Li{ A{ href: `#` T`Documentation` } }
}
}
}