-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
💥 feat: add rtl support and update README.md
- Loading branch information
Showing
22 changed files
with
9,869 additions
and
11,859 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,9 @@ | ||
# v1.0.0 (2023-09-06) | ||
|
||
## 💥 Breaking Changes | ||
- [`f43b984`](https://github.com/MoIzadloo/ultimate-react-multilevel-menu/commit/f43b984) feat: first commit | ||
|
||
# v1.0.0 (2023-09-06) | ||
|
||
## ✨ New Features | ||
- [`abf31d9`](https://github.com/MoIzadloo/react-multi-level-menu/commit/abf31d9) feat: yarn instead of npm | ||
|
||
- [`abf31d9`](https://github.com/MoIzadloo/react-multi-level-menu/commit/abf31d9) feat: yarn instead of npm | ||
|
||
## 💥 Breaking Changes | ||
- [`1566235`](https://github.com/MoIzadloo/react-multi-level-menu/commit/1566235) feat: first commit | ||
|
||
- [`1566235`](https://github.com/MoIzadloo/react-multi-level-menu/commit/1566235) feat: first commit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,122 @@ | ||
<img src="./styleguide/assets/logo.png" width="90" align="right" /> | ||
|
||
# The Ultimate React Multilevel Menu | ||
|
||
URMM is a responsive menu react component. It's designed to be customizable and user-friendly. | ||
|
||
- **User-friendly** simple and eligent | ||
- **Customizable** to be suited to your needs | ||
- **RTL-Support** to support different languages | ||
- **Mutli-level** to go as deep as you want | ||
|
||
# Pros | ||
|
||
1. URMM is fully customizable thanks to different props | ||
2. URMM supports multi-level menus | ||
3. URMM is easy to implement | ||
|
||
## Demo. | ||
|
||
Documentation is [here](https://moizadloo.github.io/ultimate-react-multilevel-menu/). | ||
|
||
## Install | ||
|
||
```sh | ||
npm install --save ultimate-react-multilevel-menu | ||
``` | ||
|
||
or | ||
|
||
```sh | ||
yarn add ultimate-react-multilevel-menu | ||
``` | ||
|
||
## Minimum Working Set Up | ||
|
||
```tsx | ||
import { | ||
Nav, | ||
Collapse, | ||
Item, | ||
Items, | ||
Logo | ||
} from 'ultimate-react-multilevel-menu' | ||
|
||
;<Nav className={'navbar-light bg-white'}> | ||
<Logo href="/">Logo</Logo> | ||
<Collapse> | ||
<Item href={'#home'}>Home</Item> | ||
<Items href={'#articles'} title="Articles"> | ||
<Items href={'#power-plant'} title="Power plant"> | ||
<Item href={'#turbine'}>Turbine</Item> | ||
</Items> | ||
</Items> | ||
<Items href={'#about'} title="About"> | ||
<Item href={'#introduction'}>Introduction</Item> | ||
</Items> | ||
<Item href={'#pricing'}>Pricing</Item> | ||
</Collapse> | ||
</Nav> | ||
``` | ||
|
||
## Componnents | ||
|
||
### Nav | ||
|
||
Nav component is container of all other components and you can change the color scheme by using the predefined css classes or your custom css classes | ||
|
||
#### Props | ||
|
||
| Name | Type | Default | Description | | ||
| --------- | -------------- | ------- | --------------------- | | ||
| dir | "rtl" \| "ltr" | "ltr" | Menu direction | | ||
| className | "string" | "" | CSS class for nav tag | | ||
|
||
### Collapse | ||
|
||
Collapse component is container of Item and Items components and it's responsible to make the menu responsive and elegant on small screens | ||
|
||
#### Props | ||
|
||
| Name | Type | Default | Description | | ||
| ---- | ---- | ------- | ----------- | | ||
|
||
### Logo | ||
|
||
Logo component is container of your logo which can be an image or a simple text | ||
|
||
#### Props | ||
|
||
| Name | Type | Default | Description | | ||
| --------- | ----------------- | ------- | --------------------------------- | | ||
| href | "string" | "" | Logo url link | | ||
| as | React.ElementType | a | The component that link render as | | ||
| className | "string" | "" | CSS class for container div tag | | ||
|
||
### Item | ||
|
||
Item component is a single link | ||
|
||
#### Props | ||
|
||
| Name | Type | Default | Description | | ||
| --------- | ----------------- | ------- | --------------------------------- | | ||
| href | "string" | "" | Item url link | | ||
| as | React.ElementType | a | The component that link render as | | ||
| className | "string" | "" | CSS class for container li tag | | ||
|
||
### Items | ||
|
||
Items component is a link and a container for other Item or Items components | ||
|
||
#### Props | ||
|
||
| Name | Type | Default | Description | | ||
| --------- | ----------------- | ------- | --------------------------------- | | ||
| href | "string" | "" | Url link for it self | | ||
| as | React.ElementType | a | The component that link render as | | ||
| className | "string" | "" | CSS class for container ul tag | | ||
|
||
### Contact Me | ||
|
||
Email : `moizadloo@gmail.com` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,9 @@ | ||
import { ReactNode } from 'react' | ||
import { ElementType, ReactNode } from 'react' | ||
|
||
interface ItemProps extends Partial<Omit<HTMLAnchorElement, 'children'>> { | ||
children?: ReactNode | ||
href?: string | ||
as?: ElementType | ||
} | ||
|
||
export default ItemProps |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,11 @@ | ||
import { ReactNode } from 'react' | ||
import { ReactNode, ElementType } from 'react' | ||
|
||
interface ItemsProps extends Partial<Omit<HTMLAnchorElement, 'children'>> { | ||
children?: ReactNode | ||
title?: string | ||
href?: string | ||
isCollapse?: boolean | ||
as?: ElementType | ||
} | ||
|
||
export default ItemsProps |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,43 @@ | ||
```tsx padded | ||
import { Nav, Collapse, Item, Logo } from '../../' | ||
import { Nav, Collapse, Item, Items, Logo } from '../../' | ||
import classnames from 'classnames' | ||
;<Nav className={classnames('navbar-light')}> | ||
<Logo href={'/'}>Logo</Logo> | ||
<Collapse> | ||
<Item href={'#home'}>Home</Item> | ||
<Items href={'#articles'} title="Articles"> | ||
<Items href={'#power-plant'} title="Power plant"> | ||
<Item href={'#turbine'}>Turbine</Item> | ||
</Items> | ||
</Items> | ||
<Items href={'#about'} title="About"> | ||
<Item href={'#introduction'}>Introduction</Item> | ||
</Items> | ||
<Item href={'#pricing'}>Pricing</Item> | ||
</Collapse> | ||
</Nav> | ||
``` | ||
|
||
### Logo With Image | ||
|
||
```tsx padded | ||
import { Nav, Collapse, Items, Item, Logo } from '../../' | ||
import classnames from 'classnames' | ||
;<Nav className={classnames('navbar-light')}> | ||
<Logo href={'/'}> | ||
<img src={'logo.png'} /> | ||
</Logo> | ||
<Collapse> | ||
<Item href={'#home'}>Home</Item> | ||
<Items href={'#articles'} title="Articles"> | ||
<Items href={'#power-plant'} title="Power plant"> | ||
<Item href={'#turbine'}>Turbine</Item> | ||
</Items> | ||
</Items> | ||
<Items href={'#about'} title="About"> | ||
<Item href={'#introduction'}>Introduction</Item> | ||
</Items> | ||
<Item href={'#pricing'}>Pricing</Item> | ||
</Collapse> | ||
</Nav> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,9 @@ | ||
import { ReactNode } from 'react' | ||
import { ElementType, ReactNode } from 'react' | ||
|
||
interface logoProps extends Partial<Omit<HTMLAnchorElement, 'children'>> { | ||
children?: ReactNode | ||
href?: string | ||
as?: ElementType | ||
} | ||
|
||
export default logoProps |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.