Skip to main content
100%

'xlabs-navigation' UX property example

✓ Published0🌍 Public
Aandrew-psch
Last edited Feb 25, 2021
Created on Feb 25, 2021

This example demonstrates a top navigation bar for a case management interface, configured entirely through a JSON object with left and right button groups. The JSON defines properties like icons, labels, intents, routes, and styling for each button, including dividers and anchor buttons. It showcases the xlabs-navigation component’s declarative UX configuration, using the React-based library’s button and anchor-button types to render navigation options such as Home, Page ONE, and Page TWO. The code explicitly specifies icons like "data-connection" and "cube", with routes pointing to internal pages or external links.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 70b6d2687f7832a6ef333872bb170b2d

This example demonstrates a responsive application layout with a collapsible sidebar navigation, built using React and Tailwind CSS. The sidebar includes a logo, search input, and navigation items with icons from the Untitled UI icon library. It uses Headless UI’s `Transition` and `Dialog` components to animate a slide-in mobile menu with overlay backdrop, while desktop layout relies on conditional `clsx` classes for active states. The code shows a `Sidebar` component that accepts navigation items as props, with default items for Home, Simulations, Feedback, and Resources.

EErnestoR
61% match
Loading thumbnail…

Gist bdc93540e598547512a61e1370c2bf71

This example demonstrates a mobile app navigation interface with two tabs, Explore and User Profile, both rendering the same Explore screen component. The code uses React Navigation’s `TabNavigator` to create a bottom tab bar with a white background and a coral active tint color (#ff5a5f). Swiping between tabs is disabled, and the tab bar is positioned at the bottom with extra vertical padding. The configuration relies on screen names defined in `screenNames` and a custom styling object for the tab bar options. No data visualization or charting library is involved; the example focuses purely on navigational structure and tab styling.

Aanosikeosifo
61% match
Loading thumbnail…

Sliding Navigation Panel Example

This example demonstrates a sliding navigation panel that appears from the right side of the screen when a button is clicked. The panel, styled with the Bulma CSS framework, slides in and out using CSS `transition` properties on the `right` offset. Clicking outside the panel closes it. The page layout includes a fixed header, footer, and main content area, all styled with custom CSS classes, and uses JavaScript event listeners to toggle the panel's active state.

Ccolbygogan
60% match
Loading thumbnail…

YOOO

This example demonstrates a responsive navigation bar for a website, showcasing a fixed menu with a logo, links, and a sign-up button. It illustrates how the layout transforms on smaller screens, using a hamburger toggle to reveal a dropdown menu. The code relies on HTML structure and CSS styling, including flexbox, grid, gradients for the logo text, and media queries for responsiveness. The design uses a dark background with vibrant gradient and hover color effects for interactive elements.

Llektr0
59% match
Loading thumbnail…

Sample for FCC user

This example demonstrates a sticky navigation bar that changes its position based on user scrolling. The page features a hero image with a portfolio introduction, followed by sections for an "About Me" bio and a "Concepts" grid showcasing three project thumbnails (Google Search Page, Pixel Maker, and JavaScript Documentation). The navbar starts at the bottom of the hero section and becomes fixed at the top of the viewport once the user scrolls past the about section, using a scroll event listener and class toggling in JavaScript. The design uses a clean, responsive layout with CSS positioning and hover effects on project cards. Built with React, this example illustrates how to implement a sticky navigation bar that transitions from an absolute to a fixed position based on scroll behavior.

Aandrewbt
59% match
Loading thumbnail…

LESSON 81 JAVASCRIPT

This example demonstrates a responsive navigation menu for a single-page website, built with HTML, CSS, and vanilla JavaScript. It shows a hamburger button that toggles a sliding panel containing anchor links to five numbered sections. The code uses CSS custom properties for theming, the Hamburgers library for the animated icon, and JavaScript event listeners to handle menu interactions and smooth scrolling. The page features a green background and a yellow header, with all styling defined in an external stylesheet.

Jjuansebas930329
59% match
Loading thumbnail…

Custom Map Box Navigation Controls

This example shows custom-styled navigation controls for a Mapbox GL map, replacing the default icons with 30x30 SVG graphics for zoom in, zoom out, compass, and fullscreen actions. The code uses Mapbox GL JS’s `NavigationControl` and `FullscreenControl` APIs to position the buttons in the top-right and bottom-right corners. It embeds optimized SVG data URIs directly into CSS classes like `.mapboxgl-ctrl-zoom-in` and `.mapboxgl-ctrl-compass-arrow`, overriding default backgrounds with `!important`. The icons are created in Sketch, exported to SVG, and optimized before being compressed into CSS background images.

Aalassetter
58% match
Loading thumbnail…

Gist f65ed8d40fde74355f8585ce0d77845b

This example shows a single interactive button component built with React. The button changes its background color to red when activated, using a boolean class binding that applies the `true` class from a SCSS stylesheet. The component defines a `NavButton` functional component, which imports React and a `style.scss` file, and renders a container with a clickable label. The styling leverages SCSS variables and nested rules to manage the button’s border, radius, and active state, while the container class uses placeholder CSS to define layout. No external data or animation libraries are involved; the behavior is limited to visual state toggling via the class change.

Aamazingandyyy
58% match