Search blocks by description or jump to a page.
A header whose page links behave like full height tabs, the active one carrying a bottom border that sits flush against the header rule.
The source for every Portfolio block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Underline Tabs Nav gives the header links the behaviour of full height tabs: each link stretches the height of the bar, and the active one (Work) carries a two pixel bottom border that lands flush on the header rule, so the current section reads at a glance without pills or dots.
The four links (Work, About, Journal, Contact) live in one typed array, with the active flag driving the border. On small screens the tab row hides and a menu button takes its place, keeping the bar clean on mobile.
Reach for this block at the top of a portfolio that wants its navigation to double as a section indicator, the way a documentation site or a multi-tab app does. The installer swaps the name, the link labels, and the active flag to match the current page.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the sectioned single-page portfolio where the active tab tracks the scroll position. Other tab uses:
Tip: the flush underline only reads as an indicator when the header keeps a visible bottom rule; drop the rule and the active tab loses its anchor.