Question 46030 in CSS Question posted in
Some basic documentation can be found here.

How to re-arrange position of this menu items – CSS

i have array and i want to rearrange some element of that array like i want 2nd element should be in 0th position and 3rd element should be in 2nd position. look screenshot for reference and final result should be like this -> Quicky Starts | Guilds | Reference Docs | Help

and if i add any new item to array then it should appear at last position

enter image description here

<Nav className="me-auto">
          {newNavArr.map((button, index) => (
            <NavLink
              key={index}
              to={button.slug}
              position="relative"
              padding="20px"
            >
              {button.title}
            </NavLink>
          ))}
        </Nav>
Tags:

3

Answers


  1. 0

    I think you can do this, first you need to create a list of sorted arrays, if your data is coming dynamically then you can sort the data in a new array according to your array as you can see below code, I hope this would be helpful.

    const arr = ["Guilds", "Reference Docs", "Help", "Quicky Starts"]

const sortedArr = ["Quicky Starts", "Guilds", "Ahmad", "Reference Docs", "Help"]

let newArr = []

arr.forEach(element => {
  if (sortedArr.includes(element)) {
    const findIndex = sortedArr.findIndex(i => i === element);
    newArr[findIndex] = element;
  }
})

let result = newArr.filter(d => d !== undefined)
console.log(result)
    Login or Signup to reply.
  2. 0

    This is the algorithm to change any position of an array write the element name you want to change and write second element name you want to swap with.
    Code:

    function change(arr, from, to){


arr.splice(arr.indexOf(to), 0, arr.splice(arr.indexOf(from),1)[0])
}
let arr = ["Quicky Starts","Guilds","Reference Docs","Help"];
console.log(arr) // return ["Quicky Starts", "Guilds", "Reference Docs", "Help"]

change(arr, "Guilds", "Quicky Starts");

console.log(arr) // return  ["Guilds", "Quicky Starts", "Reference Docs", "Help"]

    If you want to change the 2nd element should be the 1st position do this again.

    change(arr, "Reference Docs", "Quicky Starts");
console.log(arr) // return ["Guilds", "Reference Docs", "Quicky Starts", "Help"]
    Login or Signup to reply.
  3. 0

    Is far way more optimal to make this position-ordering with CSS applying a flexbox (display: flex) + order rule. It’s worth noting that the other solutions suggested rely on different mapping methods (such as splice, includes, and forEach) that create a new instance of the array (which is later cleaned up by the garbage collector but it’s not optimal at all)

    <Nav className="me-auto">
  {newNavArr.map((button, index) => (
    <NavLink
      key={index}
      to={button.slug}
      position="relative"
      padding="20px"
    >
      {button.title}
    </NavLink>
  ))}
</Nav>

    And the CSS:

    .me-auto{
  display: flex;
}

.me-auto:nth-child(3){
   order: 2;
}

.me-auto:nth-child(2){
   order: 3;
}

    You can add your custom order as desired to the rest of the elements

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search