sf-nav
v1.0.99TypeScript
Superflows Navigation Component
0/weekUpdated 3 months agoMITUnpacked: 168.1 KB
Published by Superflows-dev
npm install sf-nav
SfNav
L0
> Navigation web component provided by Superflows. This component allows implementation of the single page application architecture (SPA) using pure HTML, CSS and Javascript.
Powered by
i ♥
 
Video Tutorial
Table of Contents
- Motivation
- Design
- Development & Quality Control
- Features
- Functionality
- Demo
- Usage
- Tutorial
- Testing
- Dev Server
- Documentation
- Demo Project
- YouTube Channel
- Join The Community
Motivation
Can modular web design be achieved using just html, css and javascript? Theoretically the answer is yes. Web components rolling out in the HTML specification has opened up a lot of possibilities. The motivation of this library is building a navigation bar web component that enables a modular single page applications architecture using purely html, css, javascript.
Design
Approach is to keep the design dead simple and to support most popular navbar functionality. "Unless a clean & simple way to implement a new feature that doesn't complicate the life of the developer-user is figured out, it is not taken up for development." is the guiding philosophy.
Development & Quality Control
Test driven development approach with a focus on maintaining 100 percent unit test code coverage for the main workflow is the methodology of working.
Features
- Accessibility - This web component is designed considering the W3C accessibility recommendations
- Interoperability - This is a web component, hence natively supported by the browsers. It can be used across any frontend framework such as React, Angular, Vue or with no framework at all
Functionality
- Header & Footer - SfNav component generates both the header and footer view
- Routing - Routing is built inside this component, no external routing library required
- Brand Info - Brand name and logo are customizable
- Main Menu - Menu is fully customizable and is accepted as an un-ordered list
- Search Input - SfNav ships with a search input field
- Social Media - SfNav accepts social media links as an un-ordered list and renders them into the footer
- Copyright Notice - SfNav accepts copyright notice as input and renders it into the footer
- Notifications - Notifications feature is in-built, which includes a notification bell and a dropdown list to show recent notifications
- Call-to-action Button - SfNav comes with a call-to-action button, which can be used to highlight key actions such as sign in and subscribe.
- Profile Section - User profile section is also included, which can be used to show the status of a signed in user. It also includes a separate profile menu, that is customizable as well.
- Customizability - SfNav colors can be customized using css custom properties
- Responsiveness - SfNav nicely adapts to all screen sizes
- Keyboard Navigation - It allows keyboard navigation across all elements on desktop, mobile and tablet form factors.
- Screen Reader Support - It supports both desktop and mobile screen readers making your app acceessible to partially or completely blind users.
Demo
Usage
``
html
<sf-nav> Demo
Superflows
Sonali Joshi
mentioned you in a comment
1 day ago
Rahim Ahmed
reacted to your blog post
2 days ago
John Bolton
replied to a thread that you posted in
1 month ago
Sonali Joshi
mentioned you in a comment
1 day ago
Rahim Ahmed
reacted to your blog post
2 days ago
John Bolton
replied to a thread that you posted in
1 month ago
View All
Sign In
Copyright 2022 Superflows
`
Tutorial
$3
Create an html page and add the following html content to it:
`html
<sf-nav> Demo
Superflows
`
A bare bones version of the navigation header and footer, which includes only the brand name will be rendered. This will be our starting point!
$3
Set the brand logo as show below. It will be rendered both in the header and the footer.
`html
Superflows
`
$3
Routing is enabled by default. Every hash link specified in the SfNav component needs to be backed by its separate html component. For example the links in the brand info section (above section), contains #home as the link. For routing to work, simply create a separate home.html component for it. SfNav will then automatically take care of routing.
`html
`
For passing parameters to individual components, include the following javascript code. Individual components can then fetch their parameters from the associative array routeMap.
`html
`
$3
You can compose your menu using unordered lists, as shown in the below example.
`html
`
$3
Search Input is shown by default and the SfNav component throws a searchClick event after the user types something in the search input field and presses enter. To handle the searchClick event:
`html
`
$3
Social media links can be configured using unordered lists, and are shown in the footer. Set them up as follows:
`html
`
$3
Notifications dropdown can be configured using unordered lists as shown in the example below. Notifications functionality has three parts - (1) Unread notifications, (2) Read Notifications, (3) Notifications List Link. All of them can be configured separately:
`html
Sonali Joshi
mentioned you in a comment
1 day ago
Rahim Ahmed
reacted to your blog post
2 days ago
John Bolton
replied to a thread that you posted in
1 month ago
Sonali Joshi
mentioned you in a comment
1 day ago
Rahim Ahmed
reacted to your blog post
2 days ago
John Bolton
replied to a thread that you posted in
1 month ago
View All
`
$3
Copyright notice can be shown in the footer as follows:
`html
Copyright 2022 Superflows
`
$3
You can add a call to action (CTA) button to the header as follows:
`html
Sign In
`
$3
Profile section mainly contains two things - (1) Profile picture toggle, (2) Dropdown menu. You can configure both these as follows:
`html
`
$3
Css custom properties can be used to customize the appearance as follows:
`html
`
Testing
Tests can be run with the test script.
`bash
npm test
`
- Chromium: |██████████████████████████████| 2/2 test files | 9 passed, 0 failed
- Firefox: |██████████████████████████████| 2/2 test files | 9 passed, 0 failed
- Webkit: |██████████████████████████████| 2/2 test files | 9 passed, 0 failed
- Code coverage: 98.63 % (Overall) 100% (Main flow)
- View full coverage report at coverage/lcov-report/index.html
Dev Server
To run the dev server and open the project in a new browser tab:
`bash
npm run serve
`
There is a development HTML file located at /dev/index.html that you can view at http://localhost:8000/dev/index.html. Note that this command will serve your code using Lit's development mode (with more verbose errors). To serve your code against Lit's production mode, use npm run serve:prod`.
Documentation
Read
Demo Project
View Demo
YouTube Channel
View Channel
Join The Community
Join Now
Blog
Read
License
MIT © superflows-dev