![PyPI Now Supports iOS and Android Wheels for Mobile Python Development](https://cdn.sanity.io/images/cgdhsj6q/production/96416c872705517a6a65ad9646ce3e7caef623a0-1024x1024.webp?w=400&fit=max&auto=format)
Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
@10up/component-navigation
Advanced tools
An accessible and responsive navigation component.
npm install --save @10up/component-navigation
Clone this repo and import navigation.js
and navigation.css
from the dist/
directory.
This component accepts two arguments, the selector for the navigation container and an object containing configuration settings and optional callbacks.
action
: The action to use to open menu items (default) hoverbreakpoint
: Viewport breakpoint to switch to small screen menu (default) (min-width: 48em)onCreate
: Called after the component is initialized on page loadonOpen
: Called when a menu item is openedonClose
: Called when a menu item is closedonSubmenuOpen
: Called when a submenu item is openedonSubmenuClose
: Called when a submenu item is closedThis is the markup template expected by the component.
<nav class="site-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<a href="#primary-nav" aria-controls="primary-nav" class="site-menu-toggle">
<span class="screen-reader-text">Primary Menu</span>
<span aria-hidden="true">☰</span>
</a>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'menu_id' => 'primary-nav',
) );
?>
</nav>
The styles can be imported into your existing codebase by using PostCSS imports, or by including the standalone CSS file in your project.
@import '@10up/component-navigation';
Include the navigation.css
file from the dist/
directory.
Create a new instance by supplying the selector to use for the navigation and an object containing any necessary configuration settings and callback functions.
import Navigation from '@10up/component-navigation';
new Navigation( '.navigation', {
action: 'click',
onCreate: function() {
console.log( 'onCreate callback' );
},
onOpen: function() {
console.log( 'onOpen callback' );
},
onClose: function() {
console.log( 'onClose callback' );
},
onSubmenuOpen: function() {
console.log( 'onSubmenuOpen callback' );
},
onSubmenuClose: function() {
console.log( 'onSubmenuClose callback' );
}
} );
Include the navigation.js
file from the dist/
directory and access the component from the gobal TenUp
object.
let myNavigation = new TenUp.navigation( '.navigation', {
action: 'click',
onCreate: function() {
console.log( 'onCreate callback' );
},
onOpen: function() {
console.log( 'onOpen callback' );
},
onClose: function() {
console.log( 'onClose callback' );
},
onSubmenuOpen: function() {
console.log( 'onSubmenuOpen callback' );
},
onSubmenuClose: function() {
console.log( 'onSubmenuClose callback' );
}
} );
Example implementations can be found in the demo
directory.
Active: 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress. Bug reports, feature requests, questions, and pull requests are welcome.
FAQs
Accessible navigation component.
The npm package @10up/component-navigation receives a total of 216 weekly downloads. As such, @10up/component-navigation popularity was classified as not popular.
We found that @10up/component-navigation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.